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Phụ lục 


Lời cảm ơn 


Mỗi khi viết một cuốn sách, tôi thường vấp phải khó khăn khi viết lời cảm ơn 
dành cho những người đã giúp tôi hoàn thành tác phẩm của mình. Tôi thường 
nghĩ mình nên cảm ơn tất cả mọi người và những người thân đáng kính của họ 
phòng trường hợp tôi sẽ chăng viết thêm cuốn sách nào nữa. Nhưng đến bây giờ, 
tôi đã có trong tay vài cuốn sách, một số trong đó còn được tái bản đến lần thứ 
hai, vì vậy nhu cầu cảm ơn tất cả mọi người có vẻ bớt cấp thiết hơn. Lý do 
không phải vì những người tôi cần cảm ơn ít đi hay tôi đã tự mình làm tất cả - lý 
do thật sự khác xa thế. Nhưng lần nào cũng vậy, tôi luôn quên gửi lời cảm ơn 
một ai đó, và mặc dù họ chẳng lấy thế làm buồn lòng, tôi vẫn cảm thấy áy náy. 


Và vì vậy, khi ngồi viết những dòng cảm ơn này, tôi vẫn muốn gửi lời cảm ơn 
của mình tới một số người. Như mọi lần, chăng có một thứ bậc nào cụ thể và 
danh sách này có thể không đầy đủ. N trước hết, rõ ràng là tôi phải gửi lời 
cảm ơn tới Rebecca và Jakob cùng £ ia đình tôi, những người đã giúp đỡ 
tôi trong những ngày tôi phải vật lệ | 20 tiếng đồng hồ bên các trang 
bản thảo, cố gắng hoàn thành nó n thể. Tôi cũng xin cảm ơn Russell 
Jones, biên tập viên của nhà xuất bán € y vì sự động viên và góp ý của anh 
trong suốt quá trình hoàn thiện bản thảo, cũng như cảm ơn Neil Salkind của 
Studio B. Xin chân thành cảm ơn Chris Tuescher, John Hein, Jeremy Guthrie và 
Jim Leu, Andy BerBerkvam, Dan Noah, Justin Hoerter và Mark Little. Tất cả họ 
đều nói với tôi rằng mỗi khi tôi gửi lời cảm ơn họ trong cuốn sách của mình, họ 
đều bị thôi thúc phải mua ngay một cuốn về cho mình (nếu ai cũng cũng có ý 
nghĩ như vậy, tôi nghĩ có lẽ mình nên chạy đi kiếm ngay một cuốn danh bạ điện 
thoại). Mặc dù tôi phải đi tìm người để nói lời cảm ơn, nhưng có những người 
tôi không thể không nói lời cảm ơn, đó là Jason, Kelly và Jeff cũng như đội làm 
web và tất cả các đồng nghiệp của tôi. 


Tôi xin gửi lời cảm ơn tới anh trai Bob của tôi vì đã giúp tôi chọn nhạc để viết. 
Tôi cũng xin gửi lời cảm ơn tới Jim Oliva và John Eckendorf. Tôi không chỉ 
nghe đài khi viết vào một sáng thứ bảy, những câu chuyện của họ trên đài quả 
thật khiến các buổi sáng thứ bảy bù đầu vào bản thảo của tôi đỡ căng thăng hơn 
rất nhiều. Xin cảm ơn Tim và Rob ở Partners, Pat Dunn và Dave Marie. Xin ảm 
ơn Jeff Currier vì anh đã lắp cửa cho phóng làm việc của tôi. 


Tôi cũng xin gửi lời cám ơn tới những độc giả đã gửi phản hồi cho phiên bản 
đầu tiên của cuốn sách. Điều này đã giúp tôi rất nhiều trong việc định hình 
những điểm cần chú trọng trong ấn bản thứ hai. 


Sau khi đọc những lời cảm ơn mình viết ra, tôi nhận ra lé ra minh nên dùng tên 
goi riêng (first name) của mọi người để gửi lời tri ân. Việc này, một cách hợp lý, 
có thể khiến người nhận không nghĩ đó chính là mình. “Vâng, khi tôi gửi lời cảm 
ơn John, có nghĩa là tôi chỉ định nói đến anh chứ không phải anh John nào 
khác”. Tôi đoán là có thể mình cũng hứa cảm ơn một ai khác nữa nhưng tôi 
không thể nhớ ra, dù vậy, tôi vẫn muốn gửi lời cảm ơn của mình tới họ. 


Lời giới thiệu 
JavaScript - Hướng dân học qua 
ví dụ 


Kê từ thời điểm tác giả viết phiên bán gốc tiếng Anh đầu tiên của cuốn sách này 
(năm 2007) đã có rất nhiều thay đổi xảy ra. Những đặc tả cơ bản cho JavaScript 
đã được điều chỉnh rất nhiều; Windows Internet Explorer 8 và 9 lần lượt được 
Microsoft tung ra; các framework của JavaScript đã đạt tới độ chín và hiện đang 
được sử dụng rộng khắp, ngoài Internet Explorer và Firefox, các trình duyệt như 
Safari, Chrome và các trình duyệt khác dành cho thiết bị di động ngày càng trở 
nên phổ biến. 


JavaScript - Hướng dán học qua ví dụ làbản dịch của cuốn sách gốc JavaScript 
Step by Step phiên bản lần thứ hai, 
thứ nhất. Kiến trúc nền tảng của ng 
ứng dụng của nó thì trở nên rộng k biệt phát triển mạnh chỉ trong 
vòng ba năm trở lại đây. Vì thế, bố cụ bìa của cuốn sách cũng gần như được 
giữ nguyên, chỉ có hai điểm khác biệt cần chú ý: phiên bản này chú trọng nhiều 
hơn vào việc xử lý sự kiện trong JavaScript, và có riêng một phần nói về các thư 
viện JavaScript. Cụ thể, cuốn sách tập trung vào jQuery, một thư viện giúp đơn 
giản hóa việc lập trình với JavaScript, đặc biệt là trong những dự án lớn. 


Script gần như không đổi, nhưng 


Xuyên suốt cuốn sách, bạn sẽ thấy có nhiều phần nội dung bổ sung thêm về các 
tính năng mới của JavaScript. Tương tự, các ví dụ được dùng trong cuốn sách 
cũng được xem xét kỹ lưỡng trên nhiều trình duyệt khác nhau để phản ánh thực 
tế về bối cảnh chung về web hiện nay. Phản hồi của độc giả về phiên bản thứ 
nhất được thể hiện qua phần nội dung và là lý do chính để tác giả bổ sung thêm 
phần jQuery đồng thời chú trọng hơn đến phần xử lý sự kiện. 


Lời giới thiệu cho phiên bản đầu của cuốn sách này vẫn thích đáng và có thể áp 
dụng cho phiên bản lần hai, vì vậy bạn sẽ thấy nó trong cuốn sách này. 
JavaScript là một ngôn ngữ lập trình web thuần túy, bất kể mục đích của bạn là 
bó sung tính tương tác cho một trang web sẵn có hay tạo một ứng dụng hoàn 
toàn mới. Các trang web sẽ không được như hiện nay nếu thiếu JavaScript. 


JavaScript là một ngôn ngữ dua trên các chuẩn với đặc tả chính xác; tuy nhiên 
bất kỳ lập trình viên web nào cũng biết rằng gần như mỗi trình duyệt web lại có 
một kiểu thông dịch riêng đối với các đặc tả. May mắn là, hầu hết các trình duyệt 
web đều thống nhất các tính năng hỗ trợ và thông dịch các hàm cơ bản của 
JavaScript. 


Cuốn sách này cung cấp một cái nhìn sơ lược về JavaScript, bao gồm một số 
hàm cơ bản cũng như các tính năng và khái niệm mới nhất, như AJAX 
(Asynchronous JavaScript and XML). Người dùng ngày nay duyệt web trên 
nhiều nền tảng và bằng nhiều trình duyệt khác nhau. Tác giả đã chú trọng vào 
thực tế này khi phát triển nội dung cuốn sách, vì vậy bạn sẽ thấy các ảnh màn 
hình thể hiện nhiều trình duyệt khác nhau và việc lập trình JavaScript dựa trên 
các chuẩn được chú trọng hơn là lập trình mang tính cá nhân. 


Phần đầu của cuốn sách sẽ giúp bạn tìm hiểu về JavaScript và bắt đầu học cách 
phát triển các ứng dụng JavaScript. Bạn không cần bất kỳ một công cụ cụ thể 
nào khi lập trình JavaScript, vì vậy bạn sẽ học cách tạo các file JavaScript trong 
Microsoft Visual Studio, trong Eclipse và thậm chí trong cả Notepad (hay bất kỳ 
chương trình soạn thảo văn bản nào aeo, cuốn sách sẽ trình bày phần 
ngôn ngữ cốt lõi và các hàm cơ bả Script; sau đó, bạn sẽ tìm hiểu mối 
quan hệ giữa JavaScript và trình d ối cùng, bạn sẽ được thấy những 
ví du minh hoa về AJAX và tim hie y dựng các trang tim kiếm động. 


Phần cuối của cuốn sách sé tập trung vào các framework và thư viện JavaScript, 
cụ thể là jQuery và jQuery UI. 


Đối tượng nào nén đọc cuốn sách này? 
Đối tượng độc giả của cuốn sách này là những lập trình viên bắt đầu học lập 
trình JavaScript — những người muốn tìm hiểu các điểm cơ bản trong lập trình 
JavaScript hiện đại, cú pháp của ngôn ngữ này, nguyên lý hoạt động của nó trong 
các trình duyệt, những vấn đề thường gặp khi sử dụng các trình duyệt khác nhau 
và cách tận dụng AJAX và các thư viện bên thứ ba như jQuery để tăng tính 
tương tác cho trang web. 


Đặc điểm và quy ước của cuốn sách 


Cuốn sách này sẽ từng bước hướng dẫn bạn lập trình với ngôn ngữ JavaScript. 


Dé thu được lợi ích tối da và hiểu rõ ngón ngữ lập trinh JavaScript, ban nén bát 
đầu từ đầu cuốn sách và theo sát từng ví du cũng như các bài tập. 


Nếu bạn đã quen với JavaScript, bạn thường có ý định bỏ qua chương đầu tiên. 
Tuy nhiên, Chương 1 “Hiểu hơn về JavaScript” sẽ trình bày chỉ tiết về lịch sử 
của JavaScript cũng như tiền đề cơ bản của cuốn sách này và cả hai điều này đều 
rất hữu ích trong việc định hình nội dung phần còn lại của cuốn sách. Chương 2 
“Lập trình với JavaScript” sẽ chỉ cho bạn cách bắt đầu lập trình với JavaScript. 
Nếu có nhiều kinh nghiệm lập trình web, có thể bạn đã có sẵn một chương trình 
phát triển web, vì vậy có thể bạn muốn bỏ qua Chương 2. Tuy vậy, bạn nên làm 
quen với những chương trình phát triển web được giới thiệu thông qua các ví dụ 
lập trình JavaScript trong Chương 2. 


Cuốn sách cũng có muc luc chi tiết, giúp bạn nhanh chóng tìm được các phần, 
muc trong các chương. Trong mỗi chương đều có danh sách chi tiết những vấn 
đề được thảo luận. Ngoài ra, bạn có thể tải về và sử dụng mã nguồn của các ví 
dụ được dùng xuyên suốt cuốn sách này. 


Quy ước Ý nghĩa 


Các bài tập hướng dã 
sách chỉ tiết với các b 


v bước được giới thiệu dưới dạng một danh 


Ví dụ 


Thông tin bổ sung 


Mách nhỏ/ Chú ý/ Những phần mách nhỏ và chú 
Quan trọng một chủ đề cụ thể nào đó. 


Phần này sẽ cung cấp uồn thông tin khác về một đề tài cụ thể. 


sẽ bổ sung thêm thông tin có thể hữu ích trong 


Mã xuất hiện trong 


A Mã xuất hiện trong đoạn văn bàn — sé được in nghiêng. 
nội dung 


Khối mã Khối mã được trình bày bằng font chữ khác để làm nổi bật đoạn mã. 


x m x og ox EN 
Tài nguyén di kém có gi? 

Phần Tài nguyên đi kèm cung cấp tất cả những đoạn mã nguồn quan trọng của 
các ví dụ và các bài tập trong cuốn sách. Tài nguyên tải về bao gồm các dự án và 
các file được sắp xếp theo từng chương — mỗi chương có một thư mục riêng. 
Mỗi thư mục có những bài tập thực hành từng bước cho chương đó. 


Do JavaScript thường phụ thuộc vào trang web liên quan, nên đoạn mã nguồn 
của các bài tập thực hành thường bị chia nhỏ trong các thư mục. Điều này cho 
phép bạn thực hiện sao chép và dán phần lớn mã HTML lặp và tập trung vào 
việc nhập mã JavaScript vào ví dụ. 


Thu muc của mỗi chương đều có thư muc con CompletedCode, chứa ví dụ hoàn 
chinh. Bạn có thé mở các file trong thư muc CompletedCode để xem các ví du 
nhu đã in trong các chương. 


Tài Tài nguyén di kém 

Hầu hết các chương của cuốn sách này đều có phần bài tập cho phép bạn thực 
hành ngay những nội dung mới học. Bạn có thể tải về tất cả các dự án và các file 
trong muc Tài nguyên kèm sách tại trang http://www.poly.edu.vn/tai- 
nguyen/JavaScript-Huong-dan- Hoc-qua-vi-du.html. 


Ngoài ra, ban có thể tải Tài nguyên di kèm về từ trang web của Nhà phát hành ấn 
bản góc O'Reilly Media tại: http:/oreilly.com/catalog/9780735645523/ 


Những yêu cầu tối thiểu vé hệ thống 
Mã JavaScrip chạy trên nhiều nền tả 
Microsoft Windows, Linux và Ma 


form) khác nhau, trong đó có 


» Bộ vi xử lý: Tối thiểu là Pentiu 
năng chạy các trình duyệt web c 


. (Bất kỳ máy tính nào có khả 
trợ JavaScript). 


= Bộ nhớ: RAM 64 MB hoặc có dung lượng đủ để vận hành máy tính có khả 
năng chạy trình duyệt web có hỗ trợ JavaScript. 


= Ó cứng: Không gian ổ còn trống tối thiểu 2 MB. 

= Hệ điều hành: Windows 98 hoặc các phiên bản sau này, đa số các phiên bản 
Linux và các phiên bán Mac OS X. 

4 Màn hinh hien thị: Với độ phân giải 640x480 hoặc cao hon và độ sâu màu 
tối thiểu là 16-bit. 

= Phần mêm: Bất kỳ trình duyệt web nào chạy được JavaScript. Ban nên sử 


dụng trình duyệt Internet Explorer 6 hoặc phiên bản mới hơn, Mozilla 
Firefox 2. 0 hoặc mới hon, Opera 9 và Konqueror 3. 5. 2 hoặc mới hon. 


Hỗ trợ 


Chúng tôi đã cố gắng hết sức để đảm bảo độ chính xác của cuốn sách và Tài 


nguyên đi kém. Nếu bạn gặp vấn đề nào đó, xin vui lòng tìm dáng nguồn hỗ trợ 
theo như chỉ dẫn sau đây. 


Hồ trợ về Sách và Tài nguyên đi kèm 

Nếu bạn có câu hỏi và thắc mắc về nội dung của cuốn sách và Tài nguyên đi 
kèm, trước hết hãy truy cập trang Microsoft Press Knowledge Base, trang này sẽ 
cung cấp thông tin hỗ trợ cho những lỗi đã được phát hiện hoặc hiệu chỉnh của 
cuốn sách theo địa chỉ sau: www.microsoft.com/mspress/support/search.asp. 


Nếu bạn không tìm được câu trả lời trên Knowledge Base, hãy gửi góp ý hoặc 
cầu hỏi tới Microsoft Learning 


Technical Support theo địa chỉ: msinput@)microsoff.com hoặc gửi tới phòng Bản 
quyền và Xuất bản thuộc Dai học FPT tai địa chỉ: caodang(afpt.edu.vn. 


Phàn I 

JavaScript là gi, dùng ở đầu, tại 
sao dùng và sử dụng như thế 
nào? 


Chương 1: Hiểu hơn về JavaScript 


Chương 2: Lập trình với JavaScript 


Chương 3: Cú pháp và câu lệnh trong JavaScript 


Chương 1 
Hiểu hơn về JavaScript 


Sau khi đọc xong chương này, bạn có thể: 


Có cái nhìn hoàn chỉnh về lịch sử phát triển của JavaScript. 
Nhận biết các thành phần của một chương trình JavaScript. 
Sử dung giả giao thức javascript. 

Biết được các vị trí có thể đặt JavaScript trong một. 

Hiểu JavaScript có thé và không thể làm gi. 


Hiểu một số điểm thay đổi trong chuẩn JavaScript mới nhất (tính đến thời 
điểm phiên bản gốc tiếng Anh của cuốn sách này được xuất bản - năm 
2010). 


Lược sử vé JavaScript 


JavaScript không phải là Java. Vi thế, với cách hiểu như vậy, ban có thể tiến tới 
tìm hiểu thứ gì đó to lớn và quan trọng hơn như tạo những menu thả xuống thật 
ấn tượng chăng hạn. Tuy nhiên, nói một cách nghiêm túc, JavaScript là hệ thống 
dựng trên một chuẩn có tên goi là ECMAScript. Bạn sé tìm hiếu thêm về 
ECMAScript trong phần sau của chương này. 


JavaScript có nguồn gốc từ đâu? Có rất nhiều khả năng bạn không biết đến lịch 
sử đồ sộ và được truyền tụng thành giai thoại của JavaScript và cũng có nhiều 
khả năng bạn chăng mấy quan tâm đến nó. Nếu đúng là như vậy, có thể bạn sẽ 
muốn nhảy sang chương tiếp theo và bắt đầu viết mã JavaScript ngay tắp lự. Tất 
nhiên, làm vậy là sai lầm bạn sẽ bỏ lỡ tất cả những thông tin tuyệt vời được nhắc 
đến trong chương này. Và hiểu chút ít về lịch sử của JavaScript là điều quan 
trọng để hiểu ngôn ngữ này hiện đang c triển khai như thế nào trong các môi 
trường khác nhau. 


Ban đầu, JavaScript được phát triể a Eich, một lập trình viên của 
Netscape, vào khoảng thời gian 19 hời điểm đó, ngôn ngữ này được 
goi là LiveScript. Đó là cái tên hay cho một ngón ngữ mới và câu chuyện có lẽ 
đã dừng lại tại đó nếu các chuyên gia marketing của công ty không tự ý quyết 
định theo ý họ và đặt lại tên ngôn ngữ này thành JavaScript. Với việc cố gắng ăn 
theo ngôn ngữ Java vốn đang rất nổi, sự nhầm lẫn được xảy ra ngay sau đó. Cái 
tên JavaScript bản thân nó đã tự tạo ra mối liên hệ giữa nó với ngôn ngữ Java. 
Điều này gây ảnh hưởng xấu đến JavaScript, bởi Java, mặc dù nổi tiếng vì được 
sử dụng nhiều lại không được ưa chuộng trong môi trường web client. Thời đó, 
Java được các lập trình viên tồi sử dụng chỉ để biếu diễn dữ liệu hoặc thêm vào 
những cải tiến chăng phục vu cho mục đích nào (ví dụ: tạo những đoạn văn bản 
cuộn phiền phức). Người dùng phải trải nghiệm nhiều khó chịu khi duyệt các 
trang web có Java bởi chúng đòi hỏi họ phải cài thêm plug-in vào trình duyệt 
web thì mới chạy được. Việc này làm chậm quá trình duyệt web khiến khách ghé 
thăm cảm thấy bực bội khi gặp phải các vấn đề rắc rối liên quan đến việc truy 
cập trang web. Chỉ đến những năm gần đây, JavaScript mới bắt đầu thoát khỏi 
mối liên hệ tiêu cực này. 


JavaScript không phải là ngôn ngữ được biên dịch, điểm này khiến nó có vẻ là 


một ngôn ngữ thiếu sức mạnh. Tuy nhiên, các lập trình viên mới sử dung 
JavaScript nhanh chóng nhận ra khả nàng và sự hữu dụng của nó trong việc giả 
lập và tạo ra tính năng tương tác trên World Wide Web. Nhưng cho đến lúc nhận 
ra điều này, rất nhiều trang web đã được tao mà chỉ dùng hình ánh và mã HTML 
đơn giản, khiến các trang web thiếu sự hấp dẫn trực quan và khả năng tương tác 
trực tiếp với nội dung của trang. 


Ban đầu, JavaScript sơ khai chú trọng vào việc kiểm tra tính hợp lệ của form ở 
phía máy client và xử lý hình ảnh trên trang web để phản hồi và tương tác, công 
việc tuy thô sơ nhưng hữu dụng với khách ghé thăm. Khi khách ghé thăm trang 
web điền vào form, JavaScript ngay lập tức kiểm tra tính hợp lệ của nội dung, 
thay vì thực hiện một hành trinh đi đi — về về tới server để làm việc này. Đặc 
biệt, trong giai đoạn trước khi băng thông rộng chiếm vị trí thống lĩnh, việc chặn 
các hành trình khứ hồi tới server là cách tuyệt vời giúp ứng dụng trông nhanh 
hơn và phản hồi tốt hon — và đến ngày nay, nó vẫn vậy. 


Đâu tiên là Internet Explorer 3.0 


Với su ra đời của Microsoft Interne 3.0 năm 1996, Microsoft đã bắt 
đầu hỗ trợ nhân JavaScript, được b g IE nhu JScript, IE cũng hỗ trợ 
một ngón ngữ kịch bàn khác có tên Tà oft Visual Basic, Scripting Edition 
hay VBScript. Mặc dù JavaScript và JScript tương tự nhau ở nhiều điểm, nhung 
thuc tế chúng được triển khai không hoàn toàn nhu nhau trên IE và Netscape. Vi 
vậy, các lập trinh viên phải dùng nhiều cách khác nhau để xác định trinh duyệt 
của người dùng sau đó cho thi hành đoạn mã tương ứng với ngồn ngữ được cài 
đặt trên mỗi trình duyệt. Công việc này được gọi là “Browser Detection” (dò 
trình duyệt) và nó sẽ được trình bày trong Chương 11 “Các sự kiện trong 
JavaScript và làm việc với trình duyệt”. Hiện nay, Browser Detection vẫn được 
sử dụng mặc dù nó không được mong muốn trong việc phát triển hầu hết các 
ứng dụng do phải phát sinh thêm mã đối phó với sự khác biệt giữa các ngôn ngữ 
kịch bản khác nhau. 


Rôi đến ECMAScript 


Giữa năm 1997, Microsoft và Netscape hợp tác với Liên minh Sản xuất Máy tính 
châu Âu ECMA tung ra phiên bản đầu tiên của đặc tá ngôn ngữ goi là 
ECMAScript, tên gọi chính thức của nó là ECMA-262. Từ đó trở đi, tất cả các 
trình duyệt của Microsoft đều thực thi các phiên bản của chuẩn ECMAScript. 


Các trinh duyệt được ua dùng khác nhu Firefox, Safari và Opera hiện cũng thuc 
thi chuán này. 


ECMA-262 phiên bản 3 được tung ra năm 1999. Tin tốt lành là các trinh duyệt 
như Microsoft Internet Explorer 4.0 và Netscape 4.5 đều hỗ trợ chuẩn phiên bản 
3 và kể từ đó trở đi tất cả các trình duyệt phổ biến đều hỗ trợ các phiên bản 
JavaScript được chuẩn hóa theo chuẩn ECMA-262 phiên bản 3. Điểm đáng tiếc 
là mỗi trình duyệt lại áp dụng chuẩn này theo những cách khác nhau, vì vậy vấn 
đề không tương thích vẫn gây khó khăn cho người lập trình JavaScript. 


Phiên bản mới nhất của ECMAScript, chuẩn hóa theo chuẩn ECMA-262, được 
tung ra vào cuối năm 2009 và được biết đến với cái tên ECMA-262 phiên bản 5. 
Phiên bản 4 bị bỏ qua vì nhiều lý do và để tránh gây nhầm lẫn với những đề xuất 
cho chuẩn này. ECMA-262 phiên bản 5 đã được hỗ trợ rộng rãi (khi cuốn sách 
này đang được viết) và có thể sẽ được hỗ trợ trong phiên bản của các trình duyệt 
phổ biến như Internet Explorer, Firefox, Opera và Safari khi cuốn sách này đến 
tay bạn. 


Điều quan trọng cần chú ý là nếu bạn 
web, bạn cần tính đến những điểm 
cũng như các trình thông dịch Java 
là ban sẽ phải viết mã với một mục d hiều môi trường khác nhau, rồi 
kiểm thử, kiểm thử và lại kiểm thử trên tất cả các trình duyệt cùng các nền tảng 
có thể gặp. Với Internet ngày nay, người dùng ít khi chấp nhận những ứng dụng 
được thiết kế dở dang chỉ có thể chạy trên một loại trình duyệt. 


¡ch hợp JavaScript vào các ứng dụng 
ita các phiên bản ECMA-262 
ác trình duyệt khác nhau. Nghĩa 


Quan trọng Bạn phải chạy thử trang web của mình trên nhiều trình 
duyệt kể cả những ứng dụng web mà bạn nghĩ là sẽ chỉ được sử dụng 
với Internet Explorer. Ngay cả khi chắc chắn người dùng sẽ chỉ dùng 
ứng dụng với Internet Explorer hay bạn sẽ chỉ chấp nhận hỗ trợ khi 


cầnthiết với IE, bạn vẫn nên tiến hành chạy thử ứng dụng đó trên các 
trình duyệt khác. Điều này quan trọng không chỉ vì tính bảo mật mà 
còn vì nó cho thấy bạn là một lập trình viên chu đáo, hiểu rõ công nghệ 
Internet hiện đại. 


Rất nhiều tiêu chuẩn... 


Có thể nói các chuàn JavaScript được định nghĩa khá lỏng léo. Điều này dàn đến 
mỗi trình duyệt có thế hỗ trợ JavaScript theo mỗi cách hơi khác nhau, khiến 
công việc của mọi lập trình viên thêm rác rối. Việc phải cố gắng đáp ứng đầy đủ 
tất cả những khác biệt này còn mệt mỏi hơn là viết mã trong những ngôn ngữ 
được trình bày, cài đặt, triển khai thành những môi trường độc lập và duy nhất 
với mỗi phiên bản cụ thé ví dụ nhu Microsoft Visual Basic hay Perl chăng han. 
Nhiệm vụ của bạn (và cũng là của tôi) là theo dõi những khác biệt này và chú ý 
khi cần, rồi cố gắng tìm ra nhiều điểm chung hết sức có thể. 


^ ` ^n ` A 
Mô hình đối tượng tài liệu - DOM 
Một chuẩn đang phát triển khác có liên quan tới công việc lập trinh trong 
JavaScript là chuẩn Mô hình đối tượng tài liệu (Document Object Model - DOM) 
do Hiệp hội World Wide Web (WWW Consortium - W3C) phát triển. W3C định 
nghĩa DOM là “một giao diện kết nối độc lập với nền tảng và ngôn ngữ, cho 
phép các chương trình có thể sử dụng để truy cập động cập nhật nội dung, cấu 
trúc và style của văn bản”. Điều này có nghĩa là bạn có thể làm việc với tiêu 
chuẩn mà các trình duyệt web đều 30 giüp ban xây dựng trang web 
động. DOM tạo ra một cấu trúc dại ác văn bản HTML, XML và cho 
phép các mã script truy xuất đến cá s này. JavaScript cũng sử dung 
DOM trong nhiều chức năng quan trQ 


Tương tự như JavaScript, DOM được thông dịch khác nhau tùy theo từng trình 
duyệt, điều này khiến việc lập trình JavaScript thêm phần thú vị. Internet 
Explorer 4.0 và các phiên bản trước đó của Netscape có hỗ trợ DOM cấp độ sơ 
khai, hay còn gọi là DOM cấp 0. Nếu sử dụng DOM cấp 0, người dùng chắc 
chắn sẽ được các trình duyệt này cũng như tất cả các trình duyệt phiên bản mới 
hơn hỗ trợ. 


Microsoft Internet Explorer 5.0 và 5.5 có một số hỗ trợ cho DOM cấp 1, còn 
Windows Internet Explorer 6.0 và các phiên bản mới hơn hỗ trợ một phần của 
DOM cấp 2. Các phiên bản mới nhất của Firefox, Safari và Opera đều hỗ trợ 
DOM cấp 2. Safari cung cấp một phiên bản của bộ thông dịch webkit. Bộ thông 
dịch này là nền tảng cho các thiết bị như iPhone và iPad cũng như các thiết bị sử 
dụng hệ điều hành Android. 

Khi tìm hiểu về các chuẩn cho JavaScript cũng như các chuẩn có liên quan đến 
DOM, có một điều mà người dùng cần ghi nhớ là phải đặc biệt chú ý đến đoạn 
mã mà mình viết ra và cú pháp được sử dụng để thực thi chương trình. Nếu 


không, JavaScript có thể không chay và khiến trình duyệt không thé thông dịch 
và hiển thị trang web theo đúng ý bạn. Chương 10 “Mô hình đối tượng tài liệu” 
sé trinh bày chi tiết hơn về DOM. 


Mách nhỏ W3C có một ứng dung cho phép người dùng kiểm tra xem 


trình duyệt hỗ trợ DOM ở những cấp nào. Có thể tìm thấy ứng dụng 
này tại dia chi sau: http://www.w3.org/2003/02/06-dom-support.html. 


Chương trình JavaScript gồm 
những gi? 


Chương trình JavaScript là một tập hợp các câu lệnh, các câu lệnh này được tạo 
thành từ các từ khóa, toán tử và chuỗi định danh được sắp xếp theo một trật tự 
mà trình thông dịch Javascript có tron hết các trình duyệt web có thể hiểu 
được. Câu lệnh có thể dài, nhưng không quá phức tạp kể cả với 
những lập trình viên sử dụng ngồn ih khác. Chúng có thể có dang nhu 
sau: 


var smallNumber = 4 


Trong câu trên, từ khóa từ khóa var được đặt trước các ký hiệu khác nhu: dinh 
danh (smallNumber), toán tử (=) và số nguyên (4). (Ban sé tìm hiểu thêm về 
những khái niệm này trong phần còn lại của cuốn sách). Mục đích của câu lệnh 
trên là thiết lập giá trị của biến sma11Number bằng 4. 


Giống như các ngôn ngữ lập trình khác, các câu lệnh được sắp xếp theo trật tự 
nhất định tạo thành một chương trình thực hiện một hoặc nhiều chức năng. 
Nhưng Javascript có cách định nghĩa hàm theo cách riêng của nó, vấn đề này sẽ 
được trình bày kỹ hơn trong Chương 7 “Làm việc với hàm". Javascript cũng 
định nghĩa sẵn nhiều hàm mà bạn có thể sử dụng luôn trong các chương trình 
của mình. 


Dùng giả giao thức javascript và một hàm 


1. Mở một trình duyệt bất ky như Internet Explorer hoặc Firefox hay Google 
Chrome. 
2. Trên thanh địa chỉ, nhập dòng mã sau và nhấn phím Enter: 


javascript:alert("Hello World"); 


Sau khi nhân phím Enter, ban sé nhìn thấy một hộp thoai tương tự như hình sau 
(Chú ý: Một số phiên bản firefox không hỗ trợ tính năng này): 


Message from webp... Kế: am 


ÀA Hello World 


OK 


Chúc mừng! Vậy là ban vừa viết t òng mã JavaScript đầu tiên. Trong 
dòng lệnh đơn giản này có hai thàn n trọng thường được dùng trong 
lập trình JavaScript, đó là giả giao thú Ido-protocol) javascript có sẵn trong 
trình duyệt và quan trọng hơn là hàm alert. Những thành phần này sẽ được trình 
bày cụ thé hơn ở các chương sau. Còn ngay tại thời điểm này ban đã được tiếp 
xúc một số thứ mà bạn sẽ dùng trong tương lai! 


JavaScript cũng là ngôn ngữ hướng sự kiện, có nghĩa là nó có thể phản hồi 
những sự kiện nhất định hoặc “những hành động xảy ra”, như nhấn chuột, hoặc 
thay đổi ký tự trong một trường nhập dữ liệu. Gắn JavaScript với sự kiện là một 
phần trọng yếu trong lập trình JavaScript. Ở Chương 11, các bạn sẽ biết thêm về 
cách thức xử lý sự kiện bằng JavaScript. 


VỊ trí của JavaScript trong trang web 

Nếu bạn mới bắt đầu tìm hiểu về HTML, điều đầu tiên bạn cần biết là HTML mô 
tả các thành phần trong một trang web bằng cách sử dụng các cặp thẻ nằm trong 
dấu ngoặc (<). Thẻ đóng sẽ bắt đầu với ký tự gạch chéo (/). Các thẻ có thể lồng 
vào nhau. Mã JavaScript nằm trong cặp thẻ <script> bên trong cặp thẻ <head> 
</head> và/hoác cáp thé «body» </body> của một trang web, như ở ví du 


dưới đầy:ụ dưới đầy: 


«html» 

«head» 

<title>Tiêu dé trang web«/title» 
«script type-"text/javascript'» 

// doan má JavaScript duoc dát ó dày 
</script> 

<body> 

«script type="text/javascript"> 

// doan má JavaScript duoc dát ó dày 
</script> 

</body> 

</html> 


Trinh duyệt sé tự động thực thi các đoạn mã JavaScript trong thé <body>, điều 
này sẽ rất hữu ích cho bạn khi bạn cần ghi nội dung trực tiếp lên các trang web 
bằng cách sử dung hàm JavaScript như sau (các lời goi hàm được in đậm): 


<head> 

<title>Tiêu dé trang web</ 
«script type-"text/javascr 
// doan má JavaScript duoc 
</script> 

</head> 

<body> 

«script type="text/javascript"> 
document.write("Hello"); 
document .write("world"); 
</script> 

</body> 

</html> 


Do cách trình duyệt goi đến các mã JavaScript, khi đặt mã JavaScript vào trang 
HTML, tốt nhất là ban nên đặt thẻ «script» ở phần cuối của phần «body? chứ 
không phải ở phần <head>. Điều này giúp đảm bảo nội dung của trang web 
được tải đầy đủ phòng trường hợp trình duyệt ngừng tải trang web trong khi các 
đoạn mã JavaScript vẫn được tải. 


Khi sử dụng JavaScript trong một trang ngôn ngữ đánh dấu siêu văn bản mở 
rộng (XHTML), ký hiệu (<) và (&) sẽ được thông dịch thành mã XML, dẫn đến 
một số trục trặc cho JavaScript. Để vượt qua rào cản này, hãy nhớ sử dụng cú 


pháp dưới đầy trong trang XHTML. 


«script type-z"text/javascript'"» 

<! [CDATA[ 

// doan má JavaScript duoc dát ó dày 
]]> 


</script> 


Những trình duyệt không tương thích với XHTML không thé thông dich các 
thành phần CDATA một cách chính xác. Có một cách để giải quyết vấn đề trên 
đó là đặt phần CDATA trong chú thích JavaScript — chú thích là một hoặc nhiều 
dòng văn bán bắt đầu băng hai dấu gạch chéo (//) như bên dưới: 


«script type-"text/javascript'» 
//«1[CDATA[ 

// đoạn mã JavaScript duoc đặt ở đây 
⁄/]]> 

</script> 


Chúng ta có thé dé dàng nhân ra doa 
cách khác là rất xấu. Vậy nên trong 
ta sẽ đề cập chỉ tiết phương pháp x 


ên chưa thực sự hoàn hảo hay nói 
“Lập trình với JavaScript”, chúng 
này. 


Document Type (kiểu tài liệu) 


Nếu đã từng lập trình web, chắc chắn bạn không hề xa lạ với việc khai 
báo Document Type (kiểu tài liệu), hay thường được gọi là khai báo 
DOCTYPE. Một trong những nhiệm vụ quan trọng nhất khi thiết kế 
web là đảm bảo khai báo DOCTYPE chính xác và đúng cú pháp ở phần 
đầu của trang. Việc khai báo DOCTYPE hay thường được viết tắt là 
DTD giúp các trình duyệt (hoặc các chương trình phần tích cú pháp) 
nhận biết những quy tắc phải theo khi phân tích các phần tử trong trang 
web. 


Dưới đây là ví dụ về cách khai báo DOCTYPE cho HTML 4.01: 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


Nếu bạn sử dung Microsoft Visual Studio 2005 hay phiên bản mới hơn 
để tạo trang web, mỗi trang sẽ được tự động chèn các đoạn mã khai báo 


DOCTYPE theo chuẩn XHTML 1.0 nhu sau: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional 
"http: //www.w3.org/TR/xhtm11/DTD/xhtmli1-transitional.dtd/ 


HTML 5 sử dung kiểu khai báo DOCTYPE đơn giản hon nhiều. 
<!DOCTYPE html» 


Khi khai báo DOCTYPE sai, trình duyệt sé hiểu trang web dang theo 
chế độ Quirks. Chế độ Quirks trong nhiều trường hợp sé làm cho trang 
web chạy sai so với chủ đích của người tạo, đặc biệt là khi xem trang 
trên nhiều trình duyệt khác nhau. 


Do vậy, khi khai báo DOCTYPE, chúng ta phải đảm bảo là các file 
HTML, CSS và JavaScript tuân thủ các chuẩn web để trang web có thể 
hiển thị đúng và phục vụ số đông người dùng bất kể họ sử dụng trình 
duyệt nào. Chúng ta sẽ bàn đến HTML và việc kiểm tra tính hợp lệ cho 
CSS kỹ hơn ở Chương 15 “JavaScript và CSS”. W3C cung cấp công cụ 
kiểm tra trực tuyến tai dia chỉ ht idator.w3.org/ nhờ đó các lập 
trình viên có thể tự kiểm tra tí Bia bất kỳ website công cộng 
nào. 


Mách nhỏ Sử dụng công cụ kiểm tra tính hợp lệ của mã đánh dấu - Markup 
Validator thường xuyên cho đến khi bạn quen với việc viết mã theo chuẩn và 
luôn kiểm tra tính hợp lệ trước khi mở cửa trang web của bạn. 


Điều JavaScript có thể làm 


JavaScript là ngôn ngữ bổ trợ, tức là chúng ta rất ít gặp một ứng dụng được viết 
hoàn toàn bằng JavaScript mà không có sự hỗ trợ của các ngôn ngữ khác như 
HTML và trình duyệt web. Một số sản phẩm của Adobe có hỗ trợ JavaScript 
nhưng JavaScript chủ yếu được sử dụng khi lập trình web. 


JavaScript được thể hiện bằng chữ J trong cụm từ viết tắt AJAX (JavaScript và 
XML không đồng bộ), kỹ thuật được yêu thích của hiện tượng Web 2.0. Ngoài 
ra, JavaScript còn là một ngôn ngữ được sử dụng thường xuyên để tạo nên tính 


tương tác mà người dùng web ngày nay đòi hỏi. 


JavaScript có thể thực hiện nhiều tác vụ ở phía client của ứng dung. Ví du, nó có 
thể bổ sung tính tương tác cần thiết cho một trang web bằng cách tạo các menu 
thả xuống, xử lý tài liệu trên trang, bổ sung các phần tử động vào trang và giúp 
nhập liệu trên form. 

Trước khi tìm hiểu những điều JavaScript có thể làm (trọng tâm của cuốn sách 
này) bạn cần hiểu những điều JavaScript không thể làm nhưng lưu ý cả hai khía 
cạnh này trong cuốn sách đều không toàn diện. 


Điều JavaScript không thể làm 


Nhiều công việc mà JavaScript không thể thực hiện là do việc sử dụng 
JavaScript bị giới hạn trong môi trường trình duyệt web. Phần này sẽ giúp bạn 
tìm hiểu những tác vụ mà JavaScript không thể và không nên thực hiện. 


Không thể bắt bu 
máy client 


JavaScript phụ thuộc vào một chương trình chủ để hoạt động (chứ không chạy 
ngay trên môi trường hệ điều hành được). Chương trình chủ này thường là các 
trình duyệt web trên máy client hay còn được gọi là user agent (phần mềm đại 
diện người dùng). Vì JavaScript là ngôn ngữ phía client, nó chạy trọn vẹn trong 
client nên chỉ có thể thực hiện những øì mà client cho phép thực hiện. 


aScript chạy trên 


Hiện nay, một số người vẫn sử dụng các trình duyệt cũ không hỗ trợ JavaScript. 
Một số trường hợp khác lại không thể sử dụng các tính năng thú vị của 
JavaScript do sử dụng các chương trình hỗ trợ người khuyết tật, chương trình 
đọc trực tiếp văn bản hay các phần mềm add-on dạng hỗ trợ duyệt web. Và thậm 
chí có một số người chọn tắt JavaScript vì khó chịu với những quảng cáo pop-up 
hoặc vì lý do bảo mật. 


Bất kể đó là lý do gi, bạn cũng cần thực hiện thêm một số việc để đảm bảo trang 
web bạn đang thiết kế có thể sẵn dùng với cả những người không được hỗ trợ 
JavaScript. Bạn có thể phản đối “Nhưng những tính năng đã có thật sự là rất 
tuyệt, tuyệt vời, dễ chịu, cần thiết”. Cho dù tính năng đó của trang web tuyệt vời 


cỡ nào, ban sẽ vẫn được hưởng lợi nhiều hơn khi khá năng tương tác của nó tốt 
thêm và dẫn tới số lượng khách thăm trang web tăng lên. Trong phần “Các mẹo 
sử dụng JavaScript” ngay sau đây, tôi sẽ đưa ra một số chỉ dẫn mà bạn có thể 
làm theo để sử dụng JavaScript hợp lý và hiệu quả trên trang web của mình. 


Xem xét vấn đề này theo một hướng khác cũng có thể hữu ích. Khi bạn xây 
dựng ứng dụng web để chạy trên Microsoft Internet Information Services (IIS) 
6.0, bạn có thể giả định rằng ứng dụng này thường hoạt động khi chạy trên một 
server IIS 6.0 ở bất kỳ đâu. Tương tự như vậy, khi bạn xây dựng ứng dụng cho 
Apache 2, bạn có thể chắc chắn là nó sẽ hoạt động trên các máy cài Apache 2 
khác. Tuy nhiên, giả định này không đúng với JavaScript. Khi bạn viết một ứng 
dụng chạy tốt trên máy tính của mình, bạn không thể chắc nó sẽ hoạt động trên 
máy tính của người khác. Bạn không thể kiểm soát việc ứng dụng của bạn sẽ 
hoạt động thế nào khi nó được gửi tới máy client. 


JavaScript không thể đảm bảo việc bảo 
mật dữ liệu 

Vì JavaScript được vận hành hoàn 
hoc cách chấp nhận việc mất quyề chương trình, và đôi khi có thể 
gây ra những tác động nghiêm trọng. Chương trình nằm trên máy client, 
người dùng có thể thoải mái tác động lên dữ liệu. Cũng như với các ngôn ngữ 
lập trình khác, bạn không nên tin những dữ liệu được gửi trả từ phía client. Ngay 
cả khi đã sử dụng hàm JavaScript để kiểm tra tính hợp lệ của form, bạn vẫn phải 
kiểm tra lại dữ liệu đầu vào khi dữ liệu này được gửi lên server. Nếu phía client 
đã tắt JavaScript nó có thể gửi dữ liệu rác qua form trên trang web. Nếu bạn tin 
tưởng rằng hàm JavaScript phía client đã kiểm tra dữ liệu để đảm bảo tính hợp 
lệ, có thể bạn sẽ bắt gặp những dữ liệu không hợp lệ được gửi lại server, điều 
này gây ra những hệ quả nguy hiểm và khôn lường. 


client, nên người lập trình phải 


Quan trọng Nên nhớ JavaScript có thể bị tắt trên máy tính của người dùng. 
Do đó bạn không nên tin vào các kỹ thuật JavaScript của mình sẽ thành 


công, ví dụ như sử dụng JavaScript để vô hiệu hóa chuột phải hay ngăn 
người dùng xem mã nguồn của trang web. Ngoài ra, bạn cũng không nên 
dùng những kỹ thuật này như là các phương thức bảo mật trong ứng dụng. 


JavaScript khóng thé chay lién domain 


Người lập trinh với JavaScript cũng phải nắm được Chính sách cùng nguồn góc 
(Same Origin Policy). Theo quy định của chính sách này, những đoạn mã chạy 
trên một domain không thể truy cập thuộc tính hay tác động đến đoạn mã của 
một domain khác. Cháng hạn, JavaScript có thể được sử dụng để mở một cửa sổ 
trình duyệt mới, nhưng nội dung của cửa sổ đó bi hạn chế bởi đoạn mã gọi. Và 
tất nhiên, khi một trang trên trang web của tôi (braingia.org) có chứa mã 
JavaScript, nó cũng không có khả năng truy cập bất kỳ mã JavaScript nào đang 
được thuc thi trên một domain khác chăng hạn microsoft.com. Đây là đặc điểm 
cốt yếu của Chính sách cùng nguồn gốc: JavaScript phải được thực thi hoặc bắt 
nguồn từ cùng một vị trí. 


Chính sách trên ngược lại với ngữ cảnh sử dụng frame và các đối tượng 
XMLHttpRequest của AJAX vốn cho phép gửi nhiều yêu cầu JavaScript tới các 
web server khác nhau. Windows Internet Explorer 8 của Microsoft có hỗ trợ đối 
tượng XDomainRequest, việc này cho phép truy cập phần nào dữ liệu của các 
domain khác. Các giải pháp thay thế h sách này và một số cách sử dụng 
JavaScript trên nhiều domain sẽ đ trong Chương 19 “Sơ lược về 
AJAX”. Còn bây giờ, bạn chỉ cần JavaScript chỉ có thể thực hiện 
một số tác vụ nhất định trên cửa sổ web của chính bạn. 


JavaScript không thực hiện ở phía 


Server 


Khi lập trình bằng các ngón ngữ phía server nhu Visual Basic .NET hay PHP 
(PHP là từ viết tắt dé quy của PHP: Hypertext Preprocessor), ban có thể chắc 
chắn rằng phía server sé được cài đặt những hàm nhất định, như truy xuất cơ sở 
dữ liệu hoặc trao quyền truy cập những mô-đun cần thiết cho ứng dụng web. 
JavaScript không thể truy cập đến bất kỳ biến nào phía server. Cháng hạn, 
JavaScript không thể truy cập dữ liệu trên máy server. Mã JavaScript chỉ giới 
hạn trong nền tảng mà nó được chạy, nền tảng này thường là trình duyệt. 


Bạn cần thêm một thay đổi trong suy nghi nếu đã quen lập trinh phía server, đó 
là với JavaScript, bạn phải kiểm thử mã trên các môi trường máy client khác 
nhau để biết khả năng hỗ trợ của chúng. Khi bạn lập trình phía server, nếu server 
không cài đặt một hàm nào đó, bạn sẽ biết ngay bởi vì đoạn mã phía server sẽ lỗi 


khi ban cho chạy thử. Ngoại trừ trường hợp quản tri viên hé thống hay táy máy, 
việc thực thi mã phía server không mấy khi thay đối đột ngột, vì vậy bạn sẽ dễ 
dàng nhận ra mình có thể và không thể viết mã gì. Tuy vậy bạn không thể đoán 
hết được đoạn mã JavaScript sẽ chạy như thế nào bên phía người dùng bởi vì 
máy người dùng hoàn toàn nằm ngoài tầm kiểm soát của bạn. 


Các mẹo sử dụng JavaScript 


Có một số yếu tố có thể làm thiết kế web trở nên tốt hơn, nhưng vấn đề là ai sẽ 
phân xử cái gì tốt và cái gì không? Có thể có người ghé thăm trang web và cho 
đó là một mớ hổ lốn màu mè như thể được tạo ra bằng cách cho mọi thứ vào một 
cái bao rồi xóc tung lên, nhưng cũng có thể sẽ có người thích thiết kế và cách 
phối màu của nó. 


Vì bạn đang cầm trên tay cuốn sách này, nên tôi sẽ giả định luôn rằng bạn đang 
cần bổ sung kiến thức sử dụng JavaScript để nâng cấp trang web của mình. Cũng 
xin giả định luôn rằng bạn muốn sủ ngữ lập trình này để hỗ trợ khách 
thăm trang web cũng như làm cho ai cảm nhận tốt hơn và hoạt động 
tốt hơn. 


Thiết kế trang web không và sẽ không bao giờ là một quá trình có mục tiêu rõ 
ràng. Mục tiêu của một trang web có thể là cung cấp thông tin, mục tiêu này sẽ 
dẫn tới phương thức thiết kế tương ứng, trong khi mục tiêu của một trang web 
khác có thể lại là kết nối với ứng dụng, do đó đòi hỏi phải có thiết kế và chức 
năng chuyên biệt. Điều này có nghĩa là nhiều trang web nổi tiếng và có vẻ được 
thiết kế tốt sẽ có một số điểm chung nhất định. Phần này sẽ cố gắng trình bày 
những điểm đó, dù vậy đề nghị bạn ghi nhớ rằng nội dung trình bày không phải 
là toàn bộ mọi thứ và mỗi mục cũng chỉ phản ánh quan điểm của cá nhân tác giả. 


Một trang web được thiết kế tốt sẽ làm được những việc như sau: 


» Chú trong vào chức năng hơn là hình thức Khi ghé thăm một trang web, 
người dùng thường muốn thu thập thông tin hoặc thực hiện một công việc 
nào đó. Trang của bạn càng khó duyệt, khả năng người dùng chuyển sang 
trang khác càng lớn. 
Ảnh động và những thứ nhấp nháy xuất hiện rồi biến mất, nhưng điều đọng 
lại là trang web có thông tin cơ bản được trình bày một cách chuyên nghiệp 


và có thé truy cập dé dàng. Sử dung phần mềm hoạt ảnh sinh động hay công 
nghệ web mới nhất khiến tôi nghĩ đến thời của thẻ HTML «blink». Thé 
này khiến đoạn văn bản trong nó ẩn rồi lại hiện trên màn hình. Gần như tất 
cả các lập trình viên web đều ghét thẻ <b.11nk> và hiệu ứng của nó trên 
trang web. Nhưng cũng nên ghi nhớ rằng tính năng hấp dẫn hay hiệu ứng 
đặc biệt hôm nay của một trang web trong tương lai có thể sử dụng thẻ 
«blink». Các trang web thành công đều tuân thủ những nguyên tắc cơ bản 
và chỉ sử dụng những tính năng nổi bật theo yêu cầu của nội dung. 

Hãy sử dụng các phần tử như site map (sơ đồ trang web), thẻ alt và những 
công cụ điều hướng đơn giản và đừng đặt ra yêu cầu phải sử dụng những 
phần mềm hay plug-in đặc biệt để xem nội dung chính của trang. Tôi rất 
thường gặp phải tình huống vào một trang web và bị chặn lại vì cần cài đặt 
plug-in hoặc phiên bản mới nhất của một chương trình nào đó để xem nó. 
Mặc dù site map, thẻ alt và công cụ điều hướng đơn giản có vẻ kỳ quặc 
nhưng chúng là những thành phần không thể thiếu để hỗ trợ truy cập web 
cho người khuyết tật. Chức năng tự đọc văn bản hay những công nghệ cho 
phép chuyển nội dung của trang web sang dang âm thanh dé hỗ trợ người 
khuyết tật thường dùng sử dụng nhüng.tính năng nói trên. Tuy nhiên các 
ứng dụng đó lại hay gặp rắc rối đoạn mã JavaScript phức tạp. 


» Tuân theo chuẩn Các chuẩn wel e được tuân thủ, vì vậy bỏ qua 
chuẩn sẽ không có lợi cho bạn. ø lệnh khai báo DOCTYPE chính 
xác và viết mã HTML đúng cú pháp sẽ giúp đảm bảo trang web của bạn 
hiển thi đúng. Bạn cũng nên sử dụng công cụ Markup Validator của W3C để 
kiểm tra tính hợp lệ của mã nguồn. Nếu trang của bạn bị vỡ, không hợp 
chuẩn, cần sửa lại ngay! 


= Hiển thị thông tin chính xác trên nhiều trình duyệt Ngay cả khi Internet 
Explorer là trình duyệt được sử dụng nhiều nhất, lập trình viên cũng 

không nên bỏ qua các trình duyệt khác. Làm vậy có nghĩa là khả năng truy 
cập trang đã bị lập trình viên bỏ qua, và những người sử dụng các chức năng 
tự đọc văn bản hoặc các add-on khác sẽ không thể truy cập trang web. 
Những người không sử dụng hệ điều hành Microsoft Windows cũng có thể 
gặp rủi ro khi vào các trang web này. 
Mặc dù Internet Explorer là trình duyệt được nhiều người sử dụng nhất, 
nhưng vẫn có khả năng rất lớn là có ít nhất ba đến bốn trong số mười khách 
ghé thăm trang web sử dụng trình duyệt khác. Tất nhiên, người xem càng có 
chuyên món kỹ thuật bao nhiêu, ban càng cần điều chinh để thích nghi với 
trình duyệt khác ngoài trình duyệt Internet Explorer bấy nhiêu. Vì vậy, nếu 
trang web của bạn dành cho dân kỹ thuật, có thể bạn sẽ cần lập trình sao cho 


nó có thé chay trên Firefox, Safari hoặc thậm chí Lynx (trinh duyệt web trên 
nén text cüa Linux) 

Bất kể trang web của bạn có nội dung gi, ban sé không bao giờ muốn làm 
khách ghé thăm phải quay lưng bỏ đi vì lý do trình duyệt. Hãy tưởng tượng 
một người bán hàng quái đản cứ mười khách hàng tiềm năng thì lại từ chối 
ba người vi họ đi giày không vừa mát. Cửa hàng đó chắc chán sẽ chẳng kinh 
doanh được lầu — hay ít ra là nó sẽ không thành công như đáng lẽ ra phải 
thế. 

Nếu trang web của bạn tuân thủ các chuẩn web, nhiều khả năng là bạn đã 
thực hiện hầu hết những gi cần làm để hỗ trợ việc chạy trang web trên nhiều 
trình duyệt. Tránh sử dung các plug-in cá nhàn cũng là một cách để đảm bảo 
trang web được thông dịch chính xác. Bạn chỉ cần nhìn vào chiếc iPad của 
Apple là sẽ thấy ngay ví dụ về một thiết bị thông dụng nhưng bị giới hạn 
chức năng sử dụng vì không hỗ trợ Flash hay Java. Vì lý do này, việc tạo 
các trang đáp ứng chuẩn và tránh sử dụng những plug-in cá nhân đảm bảo 
cho trang web của bạn sẵn dùng với số 


= Sử dụng công nghệ phù hợp vào thời điểm phù hợp Nói về plug-in, một 
trang web được thiết kế tốt th Yong lam dụng hay sử dụng sai công 

nghệ. Trên một trang video, việ ideo là hoàn toàn phù hợp. 
Tương tự như vậy, trên một tra c chơi nhạc nền cũng là điều phù 
hợp. Tuy nhiên, những tính náng e không phù hợp khi được sử 
dụng trên một số trang web khác. Nếu bạn cảm thấy trang của mình cần 
lồng nhạc nền, hãy quay trở lại bảng kế hoạch và kiểm tra lại lý do đầu tiên 
bạn muốn khởi tạo trang! Tôi vẫn rùng mình sợ hãi khi nghĩ đến lần ghé 
thăm trang web của một luật sư. Khi tôi vừa vào trang, tiếng leng keng nổi 
lên dù tôi không có bất kỳ hành động can thiệp nào. Không ai để bạn bè 
mình sử dụng nhạc nền trên website trừ khi những người bạn đó là ban nhạc 
Rush (một ban nhạc Rock nổi tiếng ở Canada) và bạn đang xây dựng trang 
web cho họ. 


JavaScript phù hợp với trình duyệt nào? 
Thế giới web ngày nay vẫn đang thay đối không ngừng. Một trong những trào 
lưu được ưa chuộng hơn cả trong năm vừa qua là viết mã hiệu quả. Khái niệm 
này là một phần của trào lưu lớn hơn được biết đến với tên gọi phân tách hành 
vi. Phân tách hành vi đòi hỏi tách cấu trúc, style (kiểu trinh bày) và hành vi của 
mỗi trang web ra khỏi nhau. Trong mô hình này, HTML hay XHTML sẽ cung 
cấp cấu trúc, CSS cung cấp style và JavaScript cung cấp hành vi. Viết mã 


JavaScript theo kiểu hiệu quả tức là không can thiệp các thành phần khác là cấu 
trúc và style. Nếu trình duyệt không hỗ trợ JavaScript, trang web vẫn hoạt động 
bởi người dùng có thể sử dụng trang theo cách khác. 


Khi được áp dụng đúng cách, viết mã hiệu quả cho phép giả định nếu JavaScript 
không được hỗ trợ phía client nhưng trang web khi bị lỗi JavaScript vẫn có thể 
hoạt động ở mức độ chấp nhận được (cung cấp được nội dung). Điều này có 
nghĩa là trang web vẫn hoạt động mà không cần JavaScript và có các phương 
thức phù hợp để làm cho JavaScript sẵn dùng khi được yêu cầu. Chương 11 sẽ 
trình bày một trong những phương thức như vậy. 


Tôi ủng hộ kiểu viết mã hiệu quả vì điều đó có nghĩa là trang web tuân thủ các 
chuẩn và đảm bảo bốn yếu tố mà tôi đã chia sẻ trong phần trước. Đáng tiếc là 
điều này không phải lúc nào cũng đúng. Bạn có thể tách riêng HTML, CSS và 
JavaScript nhưng cuối cùng vẫn phải sử dụng các thẻ riêng. Tuy nhiên, khi lập 
trình để đảm bảo tính tiện lợi cho trang của mình, bạn thường chú ý hơn đến các 
chi tiết và quan tâm hơn đến kết quả cuối cùng phù hợp với chuẩn. 


Xuyên suốt cuốn sách này, tôi cố gắng 
JavaScript và cách sử dụng JavaSc 


bày những điểm cơ bản về 


Một lưu ý về JScript, JavaScrip 
Cuốn sách này bàn về JavaScript theo chuẩn ECMA ở tất cả các phiên bản, 
từ đầu tới phiên bản 5. một số phần, tôi sẽ chú trọng vào thông tin có liên 


quan đến JScript và JScript. NET. Ban có thể tham khảo thêm về JScript tai 
địa chỉ: 

JScript (Windows Script Technologies) http://msdn.microsoft.com/en- 
us/library/hbxc2t98.aspx 


Những trinh duyệt nên được hồ tro? 

Tính tương thích ngược từ lâu đã là vấn đề đau đầu đối với người lập trình web. 
Việc lựa chọn phiên bản trình duyệt nào để hỗ trợ trở thành sự thỏa hiệp giữa 
việc sử dụng tính năng mới nhất có trong trình duyệt mới nhất và tính năng 
tương thích mà các trình duyệt cũ hơn đòi hỏi. Không có quy tắc ngắn gọn và 
cứng nhắc nào về trình duyệt mà bạn nên hỗ trợ, vì vậy câu trả lời là: còn tùy. 


Quyết định phụ thuộc vào những gì bạn muốn làm với trang của mình và việc 


bạn đánh giá cái nào cao hon: Những khách sử dung phần mềm và phần cứng 
đời cũ ghé thăm trang web hay tính năng bổ sung có trên phiên bản mới của 
trình duyệt. Một số trình duyệt quá cổ lỗ không thể hỗ trợ bởi chúng không thể 
thông dịch chính xác CSS cũng như JavaScript. Chìa khóa của việc hỗ trợ đa 
trình duyệt là chạy thử trang web trên các trình duyệt đó. 


Nếu có tài khoản MSDN của Microsoft, bạn có thể tải về những sản phẩm cũ của 
hãng, bao gồm cả các phiên bản đầu của Internet Explorer và bạn sẽ thấy trang 
web hoạt động như thế nào khi chạy trên Internet Explorer 4.0. Tài nguyên bổ 
sung là Application Compatibility Virtual PC Images, bạn có thể tải về miễn phí 
từ trang Microsoft. Những tài nguyên này cho phép bạn sử dụng các phiên bản 
Microsoft Windows giới hạn thời gian và chứa các trình duyệt Internet Explorer 
6.0 và Windows Internet Explorer 7. Bạn đọc có thể tìm hiểu chỉ tiết tại: 
http://www.microsoft.com/downloads/details.aspx ?FamilyId-21EABB90-958F- 
4B64-B5F1-73D0A413C6EF&displaylang=en. 


Nhiều thiết kế web và hàm JavaScript không đòi hỏi khách thăm phải sử dụng 
phiên bản mới của trình duyệt. Tuy nhiên như đã giải thích, việc kiểm tra rằng 
trang của mình có thể hiến thi dán êu trình duyệt khác nhau là một y 
tưởng tốt. Xem http://browsers.ev các liên kết đến phần lưu trữ 
những phiên bản cũ của các trình cả khi không thể tiến hành kiểm 
thử trên nhiều trình duyệt, bạn vẫn t kế trang web sao cho lỗi nếu có 
thì cũng ở mức độ chấp nhận được. Trang web cần hiển thị thích đáng bất ke 
người dùng sử dụng trình duyệt nào. 


Có gì mới trong ECMAScript 
phiên bản 52 


Khi chuẩn ECMAScript-262 phiên bản 5 được phát hành năm 2009, nhiều cái 
tiến đã được đưa ra. Hầu hết những thay đối này không tương thích ngược với 
phiên bản cũ hơn của các trình duyệt. Tuy nhiên, khi các phiên bản mới của trình 
duyệt ra đời, những thay đổi để thích ứng với ECMAScript 262 phiên bản 5 bát 
đầu xuất hiện và trở nên sẵn dùng với các ứng dụng web da trình duyệt. 


Các phương thức mới dé làm việc với 
mang 

ECMA-262 phiên bản 5 giới thiệu một số phương thức mới để dùng với mảng. 
Chúng bao gồm phương thức foreach để duyệt qua các phần tử của mảng cũng 
nhu phương thức map, filter và các phương thức khác xác định chỉ số và 
làm giảm kích thước mảng. Chương 8 “Các đối tượng trong JavaScript” sẽ trình 
bày chi tiết hơn về mảng và các phương thức mới này. 


Những biện pháp kiểm soát mới đối với 
thuộc tính của đối tượng 

Các thuộc tính (property) của đối tượng (sẽ giới thiệu trong Chương 8) có thể 
truy cập khá linh hoạt. ECMA-262 phiên bản 5 giới thiệu các hàm get và set, 
các hàm được gọi khi một thuộc tính được truy xuất hoặc được gán cho một giá 
trị tương ứng. Bạn có thể kiểm soát vi cập các thuộc tính này thông qua 
các đặc tính (attribute) writable (nê ày có giá tri fall, bạn không thể 
thay đối giá tri của thuộc tính), con &u dác tính này có giá tri fall, ban 
khóng thé xóa thuóc tính hoác thay d lặc tính writable, configurable, 
enumerable) và enumarable (nếu đặc tính này có giá tri true, bạn có thể sử dung 
vòng lặp để duyệt các giá trị của thuộc tính). Ví du, một thuộc tính có một giá tri 
và được cấu hình giá trị enumerable bằng false, nghĩa là không thể dùng vòng 
lặp để duyệt giá trị của nó. 


Hãy xem đoạn mã sau: 


value: "testvalue" 
enumerable: false 


} 


Giá trị trên sẽ không được trả lại nếu chay qua vòng lặp. Đừng nản lòng nếu ban 
chưa hiểu cú pháp này. Các chương sau sé trinh bày chi tiết về việc tạo các đối 
tượng và sử dụng vòng lặp. 


Đối tượng mới JSON 


JavaScript Object Notation (JSON) là một phương thức trao đổi dữ liệu thường 
dùng giữa ứng dụng phía client như trình duyệt chạy JavaScript và server. JSON 
đỡ cóng kénh hơn XML trong việc trao đổi dữ liệu, đặc biệt trong các ứng dụng 
JavaScript và do đó thường được sử dụng như một định dạng dữ liệu thay thế 
dành cho các ứng dụng AJAX. 


ECMA-262 phiên bản 5 bổ sung đối tượng JSON thuần vào đặc tả ngôn ngữ. 
Cuốn sách này sẽ trình bày về JSON trong phần IV “AJAX và tích hợp phía 
server". 


Những thay đối với đối tượng Date 
ECMA-262 phiên bản 5 bổ sung những phương thức mới cho đối tượng Date để 
phân tách và tạo dữ liệu ngày tháng theo định dạng ISO. Phương thức 
toTS0String() tạo ra dữ liệu theo định dạng ISO-8601, như dưới đây: 


2044-03-12T18:51:50.000Z 


Chê độ strict mới 
ECMA-262 phiên bản 5 giới thiệu ch ới để thực thi mã được gọi là chế độ 
strict. Trong chế độ strict, bộ JavaScript sử dụng một bộ các công cụ kiểm tra cú 
pháp nghiêm ngặt hơn giúp bắt các lỗi trong đoạn mã như lỗi mã hay biến không 
được khai báo. 


Hồ trợ của trình duyệt 

ECMA-262 phiên bản 5 có rất nhiều thay đối và cải tiến, ảnh hưởng đến việc lập 
trình với JavaScript. Đáng tiếc là, những thay đối này không được hỗ trợ trong 
các trình duyệt cũ và nói ngắn gọn sẽ không được Internet Explorer hỗ trợ hoàn 
toàn. Bạn đọc có thể tìm thấy bảng so sánh tính tương thích của nhiều trình 
duyệt đối với một số tính năng có trong phiên bản ECMA 262 số 5 tại 
http://kangax.github.com/es5-compat-table/. 


Dé làm việc trong điều kiện thiếu sự hỗ trợ cho ECMA-262 phiên bản 5 trên các 
trình duyệt cũ, bạn cần viết những đoạn mã có cân nhắc đến chúng hoặc sử dụng 
một thư viện JavaScript như jQuery. Chương 21 “Giới thiệu về các thư viện và 


Framework cüa JavaScript" trinh bày vé các thu vién trong JavaScript. 
Bài táp 


1. Đúng hay sai: JavaScript được định nghĩa bởi một tổ chức chuyên phát triển 
các chuẩn và được hỗ trợ trên tất cả các trình duyệt web. 

2. Đúng hay sai: Khi JavaScript bị vô hiệu hóa trên máy tính của người dùng, 
bạn nên chặn quyền truy cập bởi không có lý do chính đáng nào lý giải cho 
việc vô hiệu hóa JavaScript. 

3. Tạo ra một khối mã định nghĩa JavaScript, khối mã này có thể xuất hiện trên 
trang HTML trong khối <head> hoặc <body>. 

4. Đúng hay sai: Cần khai báo phiên bản JavaScript đang được sử dụng trong 
khối định nghĩa DOCTY PE. 

5. Đúng hay sai: Mã JavaScript có thể xuất hiện trong cả khối <head> và khối 
<body> của trang HTML. 


Chuong 2 
Lập trinh với JavaScript 


Sau khi doc xong chương này, bạn có the: 


= Nắm được những tùy chon có sẵn khi lập trinh với JavaScript. 
» Cấu hinh máy tính của ban để có được môi trường để lập trình JavaScript. 


= Tao mới và triển khai một ứng dụng JavaScript bằng Microsoft Visual 
Studio 2010. 

= Tao mới và triển khai một ứng dụng JavaScript bằng Eclipse. 

= Tao mới một ứng dung JavaScript bằng Notepad (hoặc các trình soạn thảo 
khác). 

4 Nắm được các tùy chọn khi gỡ 


pt. 


Những tùy chọn Khi lập trình với 


JavaScript 


Vi JavaScript không phải là ngôn ngữ lập trinh cần bién dịch, nên ban không cần 
công cụ hay môi trường lập trình đặc biệt để viết và triển khai các ứng dụng 
JavaScript. Tương tự, bạn cũng không cần phần mềm server đặc biệt nào để chạy 
các ứng dụng này. Do đó, tùy chọn khi phát triển các chương trình JavaScript 
gần như vô hạn. 


Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào để viết mã JavaScript hay 
bất kỳ chương trình viết mã HTML (ngôn ngữ đánh dấu siêu văn bản) và CSS 
nào hoặc trong các môi trường phát triển tích hợp (IDE) đầy sức manh nhu 
Visual Studio. Bạn thậm chí có thể dùng cả ba cách trên. Ban đầu, có thể bạn 
phát triển web bằng Visual Studio nhưng sau đó bạn nhận thấy việc sử dụng 
những trình soạn thảo đơn giản như Notepad để xử lý JavaScript sẽ thuận tiện 
hơn. Quan trọng nhất là hãy sử dụng công cụ mà bạn cảm thấy phù hợp nhất với 


minh. 


Cuốn sách này tập trung chủ yếu hướng dẫn người dùng cách lập trinh 
JavaScript với Visual Studio, tuy nhiên nhiều lúc bạn nên sử dụng các trình soạn 
thảo văn bản đơn giản như Notepad hay Vim (bạn có thể tải Vim về từ địa chỉ: 
http://www.vim.org). Bạn cũng có thể nhập trực tiếp các đoạn mã JavaScript vào 
thanh địa chỉ của trình duyệt bằng cách sử dụng giả giao thức javascript: như đã 
trình bày trong Chương 1 “Hiểu hơn về JavaScript”. 


Khi đã lập trình JavaScript trong một thời gian, bạn sẽ nhận thấy có một số công 
việc được lặp đi lặp lại ở tất cả các trang web. Trong trường hợp này, chúng ta có 
thể đơn giản cắt dán các đoạn mã vào trang web được tạo. Tuy nhiên, cách tốt 
hơn cả là tạo một file bên ngoài chứa tất cả các hàm được sử dụng chung cho các 
trang web. Chương 10 “Mô hình đối tượng tài liệu” trình bày đầy đủ hơn về các 
hàm mặc dù vậy bạn sẽ thấy hàm được sử dụng xuyên suốt mười chương đầu. 


mo^ A A 
Thiết lập môi tr g 
Phần này của cuốn sách trình bày ình JavaScript bằng các công cụ 
khác nhau. Bạn cần biết cách sử dụ mà bạn cảm thấy tiện lợi nhất, vì 
vậy bạn đừng coi đây là danh sách công cụ mang tính toàn diện hay phiến diện. 


Một công cụ hữu ích để lập trình JavaScript là Visual Studio 2010. Khi sử dụng 
công cu này, một web server (chương trình máy chủ web) đơn giản — ASP.NET 
Development Server — đã được cài đặt sẵn, việc này sẽ giúp quá trình triển khai 
và kiểm thử ứng dụng trở nên dễ dàng. Điều này không có nghĩa là bạn phải mua 
cả bộ Visual Studio 2010 chỉ để phục vụ việc lập trình JavaScript. Nếu sử dụng 
Eclipse, công cụ thứ hai được đề cập trong chương này, bạn vẫn có thể kiểm thử 
các đoạn mã mình viết ra. Tương tự, bạn cũng có thể kiểm thử các đoạn mã 
JavaScript kể cả khi không dùng một IDE nào cá. 


Microsoft Visual Web Developer 2010 Express cũng là một lựa chọn tốt để lập 
trình web. Công cụ này cung cấp cho người dùng giao diện của Visual Studio 
cùng một số công cụ và add-on (tiện ích bổ sung) trong gói sản phẩm miễn phí. 
Ban có thể tải về tại dia chỉ: híp:/www.microsoft.com/express/Web/. 


Lập trình với JavaScript không đòi hỏi bạn phải có web server. Trường hợp 
ngoại lệ là khi bạn lập trình web với JavaScript và XML không đồng bộ (AJAX). 


AJAX không thể sử dung giao thức file://,thém vào đó Chính sách cùng 
nguồn gốc đã bàn đến ở Chương 1 chỉ cho AJAX hoạt động khi có web server. 
Tóm lại, nếu bạn có ý định lập trình với AJAX trong tương lai, bạn cần có một 
web server để làm việc. 


Với AJAX, việc lập trình trở nên đơn giản hơn. Bạn có thể dùng bất kỳ web 
server nào vì mục đích chính của bạn là làm việc với HTML, JavaScript và có 
thể một chát CSS cho thêm phần thú vị. Apache server, (tải về tại 
http://httpd.apache.org), có thể chạy trên rất nhiều nền tảng khác nhau, gồm cả 
Microsoft Windows và hiện đang dần trở thành web server phổ biến nhất trên 
Internet. 


Việc cấu hình Apache hay bất kỳ web server nào nằm ngoài phạm vi của cuốn 
sách này và xin lưu ý một lần nữa, bạn không nhất thiết phải có web server. Trên 
trang web của Apache có một số hướng dẫn rõ ràng về cách cài đặt Apache trên 
Windows và nếu bạn đang dùng bất kỳ phiên bản nào của Linux, việc cài đặt còn 
đơn giản hơn nhiều, thậm chí trong nhiều trường hợp Apache đã được cài sẵn. 
Nhiều ví dụ trong cuốn sách này sẽ chạy bất kể bạn dùng web server hay chỉ 
chạy cục bộ. Tuy nhiên, bạn nhất t web server khi chạy các ví dụ sử 
dụng AJAX. 


Lập trình JavaScript với Visual 
Studio 2010 


Visual Studio 2010 giúp lập trình viên nhanh chóng triển khai các ứng dụng web 
được cải tiến tính năng bằng JavaScript. Lần đầu chạy Visual Studio 2010, người 
dùng có thể lựa chọn các kiểu môi trường phát triển Visual Studio khác nhau. 
Điều này sẽ làm cho giao diện hiển thị khác nhau, mỗi kiểu môi trường phát 
triển phù hợp với một mục đích hoặc một ngôn ngữ phát triển cụ thể. Hình 2-1 là 
ví dụ về hộp thoại thông báo trong Visual Studio. 


Choose Default Environment Settings 


Qf) Visual Studio 2010 Professional 


Before you begin using the application for the first time, you need to specify the type of development 
activity you engage in the most, such as Visual Basic or Visual C#, This information is used to apply a 
predefined collection of settings to the development environment that is designed for your 


development activity. 


You can choose to use a different collection of settings at any time. From the Tools menu, choose 
Import and Export Settings and then choose Reset all settings. 


Choose your default environment settings: 


| General Development Settings Description: 
|Project Management Settings Please select one of the collections of settings from 
| Visual Basic Development Settings the list. 


| Visual C# Development Settings 
Visual C++ Development Settings 
| Visual F# Development Settings 

| Web Development 

| Web Development (Code Only) 


Start Visual Studio Exit Visual Studio 


Hình 2-1 Chọn kiểu môi trường lập trinh. 


Nếu bạn chọn General Development Settings, Visual Studio của bạn sẽ trông 
giống như Hình 2-2 dưới đây: 


Hie Edt View Debug Team Data Tools Test Windoe Help 


AE ES EAE 
à E 3| * 


annert To Team Foundation Server 
—- 


y Welcome Windows Web L Office SharePoint Data 
iew Project, 


i 
EH pm Projects DI pe T What's New in Visual Studia 2010 


Learn about the new Éeatures included in 


Khi: release 


Visao! udio 2010 Overview 
What's New in NET Framework 4 
Customae the Visim] Sudio Start Page 


eating Applications with Visual Studio 
Exteneing Visual Studio 


Cammunity and Learning Resources 


[3 Close page after proectlosd 
lự Shoe page on startup 


Hinh 2-2 General Deviopmen Seti Rino che nhất cho các dựánlập - 
trình. 


Bạn có thể thay đổi thiết lập để Visual Studio sử dụng Web Development 
Settings bằng cách chon Import and Export Settings từ menu Tools, khi đó 
Import And Export Settings Wizard sẽ hiển thị. Chọn Select Reset All Settings 
nhu trong Hinh 2-3 và nhán Next. 


Chú y Ban không cần thay đổi thiết lập của môi trường lập trinh. Tuy nhiên, 


trong cuốn sách này, chúng tôi giả định bạn đã chọn Web Development 
Settings trong Visual Studio 2010. 


Import and Export Settings Wizard 


Welcome to the Import and Export Settings Wizard 


You can use this wizard to import or export specific categories of settings, or to reset the environment to 
one of the default collections of settings. 


What do you want to do? 


Export selected environment settings 


Settings will be saved out to a file so they can later be imported at any time on any machine. 


Import selected environment settings 


Import settings from a file to apply them to the environment, 


© Reset all settings 


Reset all environment settings to one of the default collections of settings. 


Hinh 2-3 Chuẩn bi thay đối thiết lập sang Web Development Settings trong Visual Studio 
2010. 


Tiếp đó, cửa sổ Save Current Settings sé xuất hiện nhu Hinh 2-4. Nếu có thiết 
lập nào muốn lưu, chon Yes, Save My Current Settings. Ngược lại, chon No, Just 
Reset Settings, Overwriting My Current Settings. Chọn Next để tiếp tuc. 


Cửa sõ Chose A Default Collection Of Settings sẽ xuất hiện nhu Hinh 2-5, chon 
Select Web Development settings và chon Finish. 


Hộp thoai Reset Complete xuất hiện. Nhãn vào Close để thiết lập lại môi trường 


cüa ban thành Web Development settings 


Với các thiết lập Web Development hiện tai, người dùng có thể truy cập nhanh 
vào các tác vụ lập trình web với ASP.NET, JavaScript, HTML và CSS — những 
ngôn ngữ cốt lõi của web. Để tìm hiểu về các thiết lập trong Visual Studio 2010, 
xem thêm tai http://msdn.microsoft.com/en-us/library/zbhkx167.aspx. 


fa " 1Ì 
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i Ñ A Save Current Settings 
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Would you like to save your current settings before you reset? 


© Yes, save my current settings 
Settings filename: 


CurrentSettings-2010-06-26-1.vssettings 


Store my settings file in this directory: 
CAUsersNSteveXDocuments Visual Studio 2010 Settings M 


Browse... 


No, just reset settings, overwriting my current settings 


| < Previous | Cancel | 


Hình 2-4 Bằng cách lưu thiết lập hiện tai, người dùng có thể giữ cấu hinh tùy chinh mà họ vừa 
chỉ định cho. 


Import and Export Settings Wizard "o" [ £8 | 


[3 


` Choose a Default Collection of Settings 
e lệ 


Which collection of settings do you want to reset to? 


(Ša General Development Settings Description: 

cấy Project Management Settings Optimizes the environment to provide the 
most convenient access to commands and 
options for web development activities, 
regardless of programming language used. 
28 Visual C++ Development Settings Options for other types of development 
(a Visual Ft Development Settings activities are deemphasized. 


i; Web Development 


iae Visual Basic Development Settings 
iae Visual C# Development Settings 


i3 Web Development (Code Only) 


< Previous | Cancel 


Hinh 2-5 Chon Web Development setti ng Studio 2010. 


Viết trang web đầu tiên có chứa mã 
JavaScript với Visual Studio 2010 


Ngay lúc này, ban có thể tự tay tao một du án web và viết một đoạn mã 
JavaScript ngắn. Nếu không sử dung Visual Studio, hãy bó qua phần này để đến 
phần “Lập trình JavaScript với Eclipse” hoặc “Lập trình JavaScript không dùng 
IDE". 


Chú y Ban có thể tải vé các đoạn mã ví du của toàn bộ cuốn sách. Xem lai 


phần giới thiệu để biết cách tải về tài nguyên đi kèm. 


Tạo dự án web có chứa mã JavaScript bằng Visual Studio 2010 


1. Trong Visual Studio sử dung Web Development Settings, chọn New Web 
Site từ menu File. Hộp thoai New Web Site mở ra. 


2. Chọn ASP.NET Web Site (việc chon ngón ngữ Visual Basic hay Visual C# 
không quan trong) nhu hình dưới. Đổi tên thành Chapter2, với đường dẫn 
phù hợp với cấu hình đã thiết lập. Khi các thông tin được điền đúng và đủ, 
chọn *OK". Visual Studio sẽ tạo một dự án web mới. 


New Web Site % [55 | 


RECANE Temps [.NET Framework 4 x | Sort by; | Default z E) E 
| Installed Templates 


Search Installed Templat ® | 


Type: Visual Basi 
| S ASP.NET Web Ste Visual Basic IPEN 
Visual Basic Ea An ASP.NET Web site 
| Visual C# 
QUÀ ASP.NET Empty Web Site Visual Basic 


L4 ASP.NET Dynamic Data Entities.. Visual Basic 


4 ASP.NET Dynamic Data Linq ta S... Visual Basic 


BE WCF Service Visual Basic 
arl ASP.NET Reports Web Site Visual Basic 


E ASP.NET Crystal Reports Web Site Visual Basic 


Web location: File System -| :umentsxvisual studio 2010XWVebStez\Chapter2 Y | Browse.. | 


3. Visual Studio 2010 tu dóng vo Vigo file Default.aspx trong chế độ 
soạn tháo. Hãy đóng file này và tao file mới bằng cách nhân chuột phải trong 
vùng Solution Explorer (Solution Explorer là một khung nằm ở phía trên bên 
phải của Visual Studio) và chon Add New Item. (Hoặc bạn cũng có thể chọn 
New File từ menu File). Hộp thoại Add New Item mở ra nhu hình dưới đây. 
Chọn HTML Page, đổi tên thành myfirstpage.htm, sau đó nhấn Add. Visual 
studio tự động mở file này và chèn DOCTYPE cũng như các đoạn mã mặc 
dinh vào trang HTML. 


f 


Add New Item - c;\Llsers\SteveVdocurnerits\wisual stadio 2010NWebSitesNChapter2V | €v9 | z | 
Installed Templates __ Sortby: |Default d RE Search Installed Templates p 
Visual Basic + : ; 
T Visual B 
Visual Cë `» Crystal Report Visual Basic ^: RR : f 
An HTML page that can include client- 
Online Temolates E2 side cade 
SSISISNUSDAUEE a5 DataSet Visual Basic 
ag Dynamic Data Field Visual Basic 
e Generic Handler visual Basic 
LJ HTML Page Visual Basic 
3 JScript File Visual Basic 
[3 LINQ to SQL Clas;es Visual Basic 
= Preprocessed Text Template Visual Basic 
=) Report Visual Basic 
au 
=A i ; 
ES Report Wizard Visual Basic 
E z ` = 
Name: myfirstpage.htm Place code in separate file 
Select master page 
— 


Con tr huột giữa cáp thẻ «title» 
tiên của tôi. Màn hình của bạn sẽ 


4. Trong trang myfirstpage.htm, đ 
</title> và đối tua đề thành 
giống như hình dưới: 


Í ee Chapter2 - Microsoft Visual Studio (Administrator) = ~ " ee 

Die Edt Yew Webzee Buld Debug Team Data Ioch Architecture Test BeSharper Apalyre Yifndow Hep 
ia Fdal 1 A|9 h diee -|| Chengeedaebp | 
Pop eel I 2 0TMLI01ranseoa -|| O z Í O instal Web Components ; 


<|DOCTYPE hte] PUBLIC "-//W3C//DTD XHTML 1.0 Trənsitional//EN" "| 
chtel xwlns*"http://wew.23,07g/1999/xhte]1"» 
«head» 
«title»Trang đầu tiên của tóic/title»| 
€/head» 
«body» 


« /body» 
</htmì» 


Giữa thẻ <head>, sau thẻ đóng hêm vào đoạn mã sau: 


«script typez"text/java 
functio 


(textToAlert); 
Í 
yetAnotherAlert("báy là Chương 2"); 
</script> 


Chon Save All tit menu File. Doan mà hoàn chinh và trang hiên thi gióng 
nhu sau: 


o Chapter2 - Microsoft Visual Studio (Administrator) " arim) 
Ele Edt View Webgte Build Debug Team Data Tools Architecture Test ReSharper Analyze Window Help 

i-9*-iddgk-usso9-v€-£3UI|b bbw *|/ (9 | ChangePostFslterT pe H 

i o gEGE| T 7| XHIML10Tvansbon - | @ -i O Install Web Components „ 


sage - Sii E 
<IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiticnal//EN" "httg://wm«w3.org/TR/xhtml1/DTD/xhtm11-transiticnal. dtd» LÔ | 2] va | C] rs] # 
- «html xelns="http://www,w3.or£/1999/xhtm]”> P a pter 
D Account 


= «head» 
«title»Trang đầu tiên của tóic/title» 4j App. Data 


<script type="text/javascript”» Đã Scripts 
function yetAnotherAlert(textToAlert) ( [3 Styles 
slert(textToAlert); “3| Abeut.apx 
} 53] Default.aspx 
- yetAnotherAlert("Dày là Chương 2"); &Ì Global.asax 
bả bo oi 9) myfrstpage.htm 
[I] Sitemaster 
i3) Web.config 


</head> 
=<boády> 


€/body» 
</html> 


DOCUMENT 


zea 

EJ 
Alink 
Background 
BgColor 
Class 

~ | Alink 
mo% -is ———— 2 Color of all active links în the 
4 Design | C Spit | id Source document. 


Dé xem trang web vira tao, chon S Debugging tir menu Debug. Thao 
tác này khói dóng ASP.NET Devel er - server phát triển ASP.NET 
(nếu chua chay) (nếu chương trinh ch ay) và mở trang web trên trinh duyệt 
mặc dinh. Trang web được mở ra với một hộp thoai thông báo như Hình 2-6. 


Nhãn OK và đóng trình duyệt. 


Đoạn mã được thực thi như sau. Đầu tiên, thẻ script được gọi đến và khai báo 
rằng ngôn ngữ sử dụng là JavaScript: 


«script type-"text/javascript'» 


- lƑ-) http Alocalhost2 D di x| © Trang đầu tiên của tôi | nÌ S.É tội 


Message from webpage KÝ | 


A Đây là Chương 2 


Hình 2-6 Chạy JavaScript trên ASP.NET Development Server. 


Chú ý Bạn có thể khai báo Java ang cách khác, tuy nhiên đầy là cách 


được hỗ trợ rộng rãi nhất. 


Tiếp đó, đoạn mã khai báo hàm yetAnotherAlert nhận vào đối số 
textToAlert nhu sau: 


function yetAnotherAlert(textToAlert) { 


Hàm này có nhiệm vụ mở hộp thoai thông báo trên cửa số trình duyệt với bất ky 
đoạn văn bản nào được cung cấp làm đối số của hàm: 


alert(textToAlert); 


Hàm kết thúc bởi dấu ngoặc nhọn (}). Dòng tiếp theo của đoạn mã gọi đến hàm 
vừa khai báo với đối số là một chuỗi đặt trong cặp ngoặc kép như sau: 


yetAnotherAlert( "Đây là Chương 2"); 


Với đoạn mã trên, bạn đã sẵn sàng lập trình với JavaScript bằng Visual Studio 
2010. Nhưng trước khi ăn mừng, bạn cần học cách sử dụng các file JavaScript 
bên ngoài - external file (là những file nằm ngoài file HTML chứa mã 


JavaScript). 


Su dung file JavaScript ngoài vói Visual 
Studio 2010 


Ban không cần phải đặt toàn bộ đoạn mã JavaScript vào các file HTML. Thay 
vào đó, ban có thể tận dung thuộc tính src của thé «script». Thuộc tính của 
các thẻ giúp định nghĩa hoặc cung cấp thêm thông tin chi tiết cho một phần tử. 
Ví dụ, phần tử <form> có thể chứa một thuộc tính định nghĩa sự kiện nào sẽ xảy 
ra khi form được gửi di. Với thuộc tính src của thé «script», bạn có thể xác 
định vị trí của file JavaScript ngoài. Trình duyệt web sau đó sẽ đọc mã 
JavaScript chứa trong file này khi tải trang web. Với file JavaScript ngoài, bạn 
có thể giữ các đoạn mã JavaScript dùng chung ở cùng một nơi, thay vì phải cập 
nhật ở từng trang riêng biệt — điều này sẽ giúp tiết kiệm rất nhiều công sức. 

Lúc này, bạn đã tạo ra một trang web (tạo bởi Visual Studio) chỉ thực hiện một 
nhiệm vụ duy nhất là hiện ra một hộp thoại thông báo nhờ mã JavaScript nằm 
trong thé «head». Trang web này có«< JavaScript trong phần thẻ <head>. 
Trong phần tiếp theo, bạn sẽ học cá p : JavaScript vào mót file ngoài và 
tham chiếu đến đoạn mã trong file H7 


Tạo file JavaScript ngoài với Visual Studio 2010 


1. Nếu không mở được file myfirstpage.htm hãy chọn Open Project từ menu 
File của Visual Studio, chọn dự án mà ban lưu file myfirstpage.htm và mở 
file này. Khi đó Visual Studio sẽ hiển thị như ở bước 6 của ví dụ trước. 


2. Tạo mới một file để chứa mã JavaScript bằng cách chọn New File từ menu 
Eile. Hộp thoại Add New Item xuất hiện. Trong danh sách template (file 
mẫu), chon Jscript File và đối muc Name thành myscript.js, như hình dưới 
rồi nhấn vào nút Add. Lưu ý rằng danh sách template có thể khác nhau tùy 
thuộc bộ cài Visual Studio được sử dụng. Ban có thể tìm thấy file myscript.js 
trong thư mục mã nguồn mẫu của Chương 2. 


f 


Add New tem - càUsersiSteveidocurmentsiwisual studio 2010! W/ebStesNChapter2N ETES 
Installed Templates Sort by: Default C EE Search Installed Templates JD | 
Visual Basic ˆ p 
j Type: Visual Basic 
Vizual CË | » Crystal Report Visual Basic dd 
4 A icript file containing JScript code 
rye : 
, DataSet Visual Basic 
dg Dynernic Data Field Visual Basic 
=) Generic Handler Visual Basic 
E 

| LTMLPag: Visual Basic 

E: JScript File VisuslBasic —— 
a LING to SQL Classes Visual Bazic 
3 Preprace:sed Text Template Visual Basic 
& Report Visual Basic 

„al 
=à 

A Raport Wizard Visual Basic 

[EL _ n — x 

Narne: myscript: Place code in ;eparate file 
Select master page 


3. Một file JavaScript (Jscript) tr được thêm vào du án web. Ban 
sẽ thấy một tab cho file myscript.j ột tab cho file myfirstpage.htm như 
hình dưới đây. Nếu file myfirstpage.htm chưa mở, hãy nhấn đúp để mở trong 
cửa só Solution Explorer. 
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Fle Edt Ver Webzte Build Debug Team Date Tools Test Window Help 


i97 dU ud di iala r a $i € Debug i5 -| i, 
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T LA Transition IS. 


~ Saluton Explorer 
+|'- 713: 1@ 
“ | 2 cA..VChapter24 
S8 Account 
33 họp _Data 
I Script: 
J Styles 
23 Aboutaspr 
E Default aspx 
mi Blabal.air 
S) myfirztpage.htm 
28) myscriptjs 
D Site.master 
kề Web.config 


DuiiG started. Project t:(---VCHSBEteFZ., CORTIBUFATIOn: JUeDUg any CPU ------ 
Validating We 1 
Building directo '/Chapter2/Account/'. 
Building directory '/Chapter2/Scripts/'. 
Building directory '/Chapter2/* 


Show nupuEfre n9: |Build - -l 3 | 33:33 | IIl 
t 


Validation Complete 
=z======== Build: 1 succeeded or up-to-date, © failed, 0 skipped ---------- 


- 


Chú ý Phần đuôi mở rộng thô g của file JavaScript và JScript là 
.js, nhưng bạn không bát buộc phát dùng chúng. Sở di chúng ta chọn 
kiểu file JScript trong bước 2 là vì kiểu file này tự động cập nhật đúng 
phần đuôi mở rộng. Ban có thể dễ dàng chọn TextDocument từ hộp thoai 
Add New Item và đặt tên cho nó với phần mở rộng .js. 


4. Nhãn vào tab myfirstpage.htm, bôi đen đoạn mã JavaScript. Tuy nhiên, giữ 


nguyên đoạn mã bên trong thé «script» và </script>. (Hiện tai, ban chưa cần 
sử dụng những thẻ trên, chúng ta sẽ bàn đến chúng ở phần sau). Bạn cũng có 
thể tìm thấy file myfirstpage.htm trong thư mục mã nguồn mẫu của Tài 
nguyên đi kèm. 


Sao chép đoạn mã được bôi đen bằng cách chọn Copy từ menu Edit. 


Nhấn vào tab myscript.js, trỏ chuột đến dòng đầu tiên và chọn Paste từ menu 
Edit. Đoạn mã được dán tại vị trí trỏ chuột. Thay đổi đoạn văn bản trong lời 
goi hàm yetAnotherA lert thành “Đây là ví dụ thứ hai” như dưới dày: 


function yetAnotherAlert(textToAlert) { 


alert(textToAlert); 


j 
yetAnotherAlert( “Đây là ví du thứ hai"); 


7. Lưu file myscript.js bằng cách chon Save từ menu File. File này có dang 
gióng nhu sau: 
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f LUCES msfirimagqe h†n” - 3aluboni Explorer 
function yetAnotherAlert(textToAlert) { £p EE 3185 me 

alert(textToAlert); D] 09 exahaptert 

ÑÑ Account 

I họp Data 

I Script; 

"E 

23 Aboutaspr 

E Default aspx 

&Ì Blobal.a:=r 

9) myfirstpage.htm 

F) myscriptjs 

D Site. master 

ES Wehb.config 


yetAnotherAlert("Dày là ví dụ thứ hai");| 


Show nutputtrom: |Build -|| PAER E i-d 
Duiic starred: rroject €C\(... Á\CHRPCSFZ\(, conriguration: Deoug Any CPU ------ 

Validating web Site 

Building directory '/Chapter2/Account/'. 

Building directory '/Chapter2/Scripts/'. 

Building directory '/Chapter2/'. 


validation Complete 
Build: 1 succeeded or up-to-date, 9 failed, O skipped 


== 


8. Với mã JavaScript được lưu trong file myscript.js, bạn có thể xóa đoạn mã 
JavaScript trong file myfirstpage.htm, chỉ để lại cặp thẻ script có dạng như 
sau: 


<script type="text/javascript"> 
</script> 


9. Bây giờ, thêm thuộc tính src vào thé mở <script>: 
«script type="text/javascript" data-src="myscript. 


.0. Néu muón, ban có thé chuót lai doan mà báng cách xóa dãu chuyên dòng và 
đưa thẻ đóng <⁄script> lén cùng dòng với thẻ mở. 


«script type-"text/javascript" data-src="”myscr1pt. Js”></s( 
Toàn bộ nội dung của file myfirstpage.html sé giống như dưới đây: 


«IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"? 

«html xmlns-"http://www.w3.0rg/1999/xhtml" > 

«head» 

«title? Trang đầu tiên của tôi</title> 

«script type-"text/javascript" data-src=”myscript.j]s”></scrlpt> 

</head> 

<body> 

</body> 

</html> 


L1. Lưu file myfirstpage.html. 


.2. Dé xem trang bằng trình duyệt, chọn Start Without Debugging từ menu 


Debug. Trang web được duyệt qu server và mở trên trinh duyệt. Kết 
quả là hộp thoại thông báo “Đầ ứ hai” như hình sau: 


5 ittp://localhost20290/myfir O ~ & Ở X | O Trang đầu tiên của tôi | | nl Y 


Message from webpage I 


À Đây là ví du thứ hai 


.3. Nhấn OK để đóng hộp thoại thông báo. Bây giờ, xem lai các đoạn mã để 
thấy sự khác biệt. Trên trình duyệt web, chọn Source từ menu View. Lưu ý 
lúc này thé «script» chứa một tham chiếu đến file JavaScript ngoài. 


Như vậy, bạn đã biết cách lập trình JavaScript với Visual Studio 2010. Tới đây, 
bạn có thể bỏ qua một số phần để đến phần giới thiệu về cách gỡ lỗi hoặc đọc 


tiếp để tìm hiểu cách lập trinh JavaScript với các công cụ khác. 


Lập trình JavaScript bằng Eclipse 


Một IDE phổ biến khác trong giới lập trình web là Eclipse. Lập trình viên có thể 
cài đặt các framework khác nhau để hỗ trợ cho các mục đích lập trình khác nhau. 
Ví dụ, họ có thể cài đặt Web Tools Platform hay bộ công cụ lập trình PHP (PHP 
Hypertext Preprocessor) để tạo môi trường tiện ích tối ưu hóa cho công việc của 
họ. Việc thảo luận vé các dự án Eclipse tiềm năng không thuộc pham vi của cuốn 
sách này, tuy nhiên chúng ta sẽ thảo luận về việc lập trình JavaScript trên nền 
Eclipse cơ bản. 


Để lập trình JavaScript với Eclipse, trước tiên bạn phải tải về bộ cài Eclipse và 
đôi khi nền tảng chay các ứng dụng Java (JRE). Thông tin chi tiết và cách thức 
tải về có trên trang web Eclipse (http://www.eclipse.org). Trong phần này, chúng 
tôi giả dinh bạn chưa từng dùng Eclipse.và đây là lần đầu tiên ban làm quen với 
Eclipse. Tuy nhiên, phần này khôn hướng dẫn cài đặt Eclipse. Bạn 
nên tìm đọc các tài liệu hướng dẫn website của Eclipse để nắm được 
những thông tin mới cập nhật. 


Viết dự án web đầu tiên chứa mã 
JavaScript băng Eclipse 


Bây giờ đã đến lúc tạo một trang web có chứa mã JavaScript bằng Eclipse. Nếu 
bạn không dùng Eclipse, hãy bỏ qua phần này. Ở phần cuối của chương, chúng 
ta sé thảo luận cách lập trình không cần đến IDE và một số lời khuyên nhỏ khi 
øỡ lỗi JavaScript. 


Chú ý Phần này sẽ hướng dẫn sử dung IDE Eclipse cho các lập trinh viên 
JavaScript. Giao diện Eclipse của bạn có thể sẽ khác một chút với các hình 


minh họa trong cuốn sách. Khi mở Eclipse lần đầu, bạn sẽ được yêu cầu 
chọn vùng làm việc (workspace). Hãy chọn vùng làm việc mặc định. 


Tao dự án web với JavaScript trong Eclipse 


1. Tao dự án mới bằng cách chon New > JavaScript từ menu File. Hộp thoai 
JavaScript xuất hiện. Nhập Chapter2 vào muc Project name (tên dự án) rồi 
nhấn Finish. 


j9 New JavaScript Project 


Create a JavaScript project 


Create a JavaScript project in the workspace or in an external location. 


Project name: Chapter? 
Contents 


© Create new project in workspace 


C) Create project from existing source 


ectory: | €:\Lsers\Wteve\weorkspace\Chapter2 


Web Page Support 


[V] Include ECMA 3 Browser Library 
[V] Use Window as the default SuperType 


Project layout 


© Use project folder as root for the JavaScript global context 


Create a separate root folder 


Working sets 
| | Add project to working sets 


11 5t 
] 


2. Thu muc róng Chapter2 dugc mó ra trong phàn Project Explorer nhu bén 
dưới: 


File Edit Navigate Search Project Run Window Help 
n- »"0-Q-if-eiBwin-p- eere pirum 
^ j zi Gs ^B ll 2- Outline 1 B 
| [An outline is not available. 
t [ef Chapter? 
| 
(l Problems 23 € Documentation [È Declaration ep 
|f items 
Description S Resource Path locsüon Type 
n CỔ Chapter? 


3. Nhãn chuột phải vào thư muc Chapter2, chọn New > File, hộp thoại New 
File mở ra. Nhập myfirstpage.htm vào trường File Name và chon Finish. 
Ban có thể tim thấy file eclipse myfirstpage.htm trong thu muc mã nguồn 
mẫu của Chương 2. Nếu muốn sử dung file này, hãy đặt lại tên file thành 
myfirstpage.htm. 


File 


Create a new file resource, 


Enter or select the parent folder: 
Chapter2 


D c9 
i Chapter2 


File name: myfirstpage.htm| 


4. Sau khi chon Finish, Eclipse mở trang vừa tạo bằng trình duyệt riêng. Tuy 
vậy, chúng ta cần sửa chứ không phải chạy trang web. Nhấn phải chuột vào 
file myfirstpage.htm trong Project Explorer và chọn Open. Trang này được 
mở trực tiếp trong trình soạn thảo của Eclipse như sau: 


J3? JavaScript - Chapterd/myfirstpage;htm - Eclipse | 
File Edit Navigate Search Project Run Window Help 


re &:*-0-«W-.*-emimm:teis:-uw- regis E [RE foe eript | 
T Project Explorer. $3 = o |E mWfistpagehtm £5. = HÌ(EE Outline tt r 
E37 * [lAn outline is not avsilable 
* Chapter? " 
má m JavaScript Resa urces 


EI myfirztpsge.htn 


*. Problems. +2 € Documentation l9, Declaration >m 


f item: 


Desenption e Resource Path Locaban Type 


5. Bây giờ là lúc viết mã trong cửa sô soạn thảo. Hãy nhập vào đoạn mã dưới 
đầy: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional, 
"http://www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd": 
«html xmlns="http: //www 1999/xhtml" > 

<head> 

<title>Trang đầu tiên c 
«script type-"text/javas 
function yetAnotherAlert(te* 
alert(textToAlert); 


} 

yetAnotherAlert( “Đây là Chương 2"); 
</script> 

</head> 

<body> 

</body> 

</html> 


Chú ý Với mục đích của ví du này, nếu không muốn mát thời gian, ban 
có thể bó qua phần khai báo DOCTYPE và bắt đầu với thé <htm1>. 


Ngược lại, nếu bạn lập trình web thật sự thì việc khai báo DOCTYPE là 
cần thiết. Xem Chương 1 để tìm hiểu tầm quan trọng của khai báo 
DOCTYPE. 


6. Chọn Save từ menu File. Đoạn mã và trang hoàn chinh sé nhu hinh sau: 


ETT 


Jj JavaScript - ChapterZ/myfirstpage htm - Ecfeze 


Be Edt Navigate Ssạch Project Bun Wedow Help 
i21 (ẤP MaScrpt 


"e. à.9-0-Q- ý-œ Ws Ba 5o 
$ Script Explorer BE Outline 
245 «100€ UBLIC "-//W3C//DTD XHTM, 1.0 Transitional//EN* "http://www. w3.org/TR/ An outline is not avaáabile. 
X ~ xhte11/0TD/xhte11-transitional.dtd*» 
c2 Chapter «htel xelns="http:/ /Meu,w3.©rg/1999/xhte1*› 
BÀ la Scnet Resources «head 
D settings «title»Trang đều tiên của tóíc/title» 
È project «script typee"text/javascript"» 


myfiritpage.htm 1 t 
poep function yetAnotherAlert(textToAlert) ( 
Alert) 


alert(textToAlert); 
yetAnotherAlert(”Đây là Chương 2"); 
</script> 
</hħeać> 


«body» 


</body> 
</htal> 


Description Resource Path Locatbon Type 


Writable Inert 18:1 


ân Project Explorer, chọn Open 


Dé xem trang vita tao, nhân chuót p 
thị trên trinh duyệt của Eclipse 


With rồi chọn Web Browser. Tran 
với một thông báo như Hình 2-7. 


Ngoài ra, ban cũng có thể xem trang vifa tạo bằng các trình duyệt khác chăng 
hạn như trình duyệt mặc định. Để mở bằng trình duyệt mặc định, duyệt đến file 
vừa tạo (ví dụ C:UsersSteveworkspaceChapter2folder) và nhấn đúp vào file. 


Chú ý Nếu sử dụng Windows Internet Explorer, bạn có thể nhận được cảnh 
báo về việc truy cập các nội dung bị chặn, tuỳ thuộc vào mức độ bảo mật 
được cấu hình. Truy cập địa chỉ 


http://windows.microsoft.com/enUS/windows7/Internet-Explorer- 
Information-bar-frequently-asked-questions dé tim hiéu thém vé tính náng 
này và làm thé nào dé tát nó. 
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Message from webpage m] 
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Hinh 2-7 Hiên thị file trong Eclipse. 


Trong ví dụ này, bạn đã tạo được 
Phần JavaScript của trang web chỉ 
được gọi đến và khai báo rằng ngô 


ab cơ bản có nhúng mã JavaScript. 
ài phần tử. Đầu tiên, thẻ script 
đụng là JavaScript như dưới đây: 


«script type-"text/javascript'» 


Chú y Bạn có thể khai báo JavaScript bằng cách khác, tuy nhiên đây là cách 


được hỗ trợ rộng rãi nhất. 


Tiếp đó, đoạn mã khai báo hàm yetAnotherAlert có một tham số 
textToAlert nhu sau: 


function yetAnotherAlert(textToAlert) ( 


Nội dung của hàm có nhiệm vụ duy nhất là hiển thị một hộp thoai thông báo 
trong cửa sổ trình duyệt. Thông báo được hiển thị có thể là bất kỳ đoạn văn bản 
nào được truyền vào như tham số của hàm. Tất cả được thực hiện bởi lệnh dưới 
đầy: 


alert(textToAlert); 


Hàm kết thúc bởi dấu ngoặc nhọn. 
} 


Dòng tiếp theo của đoạn mã gọi đến hàm vừa khai báo với đối số là một chuỗi 
đặt trong ngoặc kép như sau: 


yetAnotherAlert( “Đây là Chương 2"); 


Qua ví dụ ngắn trên, bạn đã thấy cách lập trình JavaScript với Eclipse. Phần tiếp 
theo sẽ hướng dẫn cách đặt mã JavaScript vào một file bên ngoài, đây là phương 
thức được sử dụng phổ biến khi lập trình JavaScript. 


Sử dụng file JavaScript ngoài với 

Eclipse 

Lúc này, bạn đã có một trang web (được tạo với Eclipse) hiển thị một hộp thoại 
thông báo khi được duyệt. Đoạn mã Ja ipt thực hiện việc này nằm trong cặp 
thẻ <head> của trang. Trong phần an sẽ được hướng dẫn cách lưu mã 
JavaScript vào một file bên ngoài đến file này trong mã HTML. 


Tạo file JavaScript ngoài với Eclipse 


1. Đầu tiên, cần chắc chắn đã mở file myfirstpage.htm trong Eclipse (Bạn có 
thể tìm thấy file này trong phần Tài nguyên đi kèm cuốn sách) bằng cách 
chọn dự án chứa file myfirstpage.htm và mở nó bằng cách nhấn chuột phải, 
chọn Open With, chọn Text Editor. 


2. Tạo một file mới để chứa mã JavaScript bằng cách chon New > File từ menu 
File. Hộp thoai New File mở ra. Nhập myscript.js vào trường File name nhu 
bên dưới rồi chon Finish. 


$9 New File EnS] 


| File " 


Create a new file resource. 


Enter or select the parent folder: 
Chapter2 
c» 
[m Chapter2 


File name:  myscript.js 


Advanced >> 


® m 


3. Eclipse sẽ thêm một file JavaScript rỗng vào du án. Nếu file này chua tự 
động mở, nhấn chuột phải vào file myscript.js trong cửa sổ Project Explorer, 
chọn Open With > Text Editor. Lúc này sẽ bạn sẽ thấy hai tab cho file 
myscript.js và file myfirstpage.htm. 


Chú ý Bạn không cần sử dụng đuôi .js cho phần mở rộng cho file 


JavaScript, tuy nhiên đuôi này sẽ giúp bạn dễ dàng nhận diện các file về 
sau. 


4. Nhân chuột vào tab myfirstpage.htm, bôi den đoạn mã JavaScript đã tao lúc 
trước, ngoai trừ cáp thé «script» </script> (Chúng ta sẽ đề cập đến cáp 
thé này sau). 


5. Sao chép đoạn mã đã chọn bằng cách chon Copy từ menu Edit. 


6. Nhãn chuột vào tab myscript.js, dán đoạn mã đã sao chép bằng cách chọn 
Paste từ menu Edit. Đổi đoạn văn bản trong lời gọi hàm thành “Đây là ví dụ 
thứ hai”. Đoạn mã sẽ giống như sau: 


function yetAnotherAlert(textToAlert) { 
alert(textToAlert); 


j 
yetAnotherAlert( “Đây là ví du thứ hai"); 


7. Lưu file myscript.js bằng cách chon Save từ menu File. File này sé giống 
nhu hinh minh hoa dưới: 
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8. Khi mã JavaScript đã được lưu trong file myscript.js, ban có thể xóa đoạn mã 
JavaScript trong file myfirstpage.htm, chỉ để lại cặp thẻ script như dưới đây: 


«script type-"text/javascript'» 
</script> 


9. Bây giờ, thêm thuộc tính src vào thé mở <script>: 
<script type="text/javascript" data-src="myscript.js"> 


.0. Nếu muốn, bạn có thể chuốt đoạn mã bằng cách xóa dẫu chuyển dòng để đưa 
đoạn mã về cùng một dòng như sau: 


Kết quả trả về sé là một hộp thoai t 
như sau: 


«script type-"text/javascript" data-src="”myscr1pt. Js”></s( 
Lúc này, toàn bộ nội dung của myfirstpage.html sẽ giống như dưới đây: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional, 
"http://www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd": 
«html xmlns-'"http://www.w3.0rg/1999/xhtml" > 

«head» 

<title>Trang đầu tiên của tói«/title» 

«script type-"text/javascript" data-src=”"myscr1pt. Js”></s( 
</head> 

<body> 

</body> 

</html> 


. Luu file myfirstpage.htm. 


Xem trang web trên trinh duyét bằng cách nhấn chuột phải vào file 
myfirstpage.htm trong cửa sõ Project Explorer, trỏ đến Open With, chon Web 
Browser. Trang web sẽ được mở t ep trên trình duyệt của Eclipse. 


i dòng chữ “Đây là ví dụ thứ hai” 
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pse đã hoàn tất. Mặc dù vậy, còn 
Dse, bạn nên truy cập vào trang 


Bài hoc cơ bản về lập trình JavaSci 
có rất nhiều điều bổ ích về lập trình 
web của Eclipse để tìm hiểu thêm. 


Lập trình JavaScript không dùng 
IDE 


Trong nhiều trường hợp, việc sử dụng các chương trình soạn thảo văn bản như 
Notepad hay Vim sé là cách tiếp cận đơn giản và dễ dàng hơn việc sử dụng các 
IDE khi lập trinh JavaScript. Tuy nhiên, cần tránh việc sử dung các hệ thống xử 
lý văn bản phức tạp như Microsoft Office Word vì nó có thể tự động thêm vào 
file mã nguồn những thành phần không thể hiện trên màn hình khiến cho hoạt 
động của trang web bị hỏng. 


Viết dự án web đầu tiên có chứa mã 


JavaScript báng Notepad 


Phần này sẽ giới thiệu một ví du về lập trinh với JavaScript trên Notepad. 
Tao trang web chứa mã JavaScript bằng Notepad 


1. Trong Microsoft Windows 7 (hay Microsoft Windows XP, Microsoft 
Windows Vista), mở Notepad bằng cách chọn nút Start, chon All programs, 
Accessories, Notepad. Nhập vào đoạn mã sau: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Trang đầu tiên của tô1</title> 

«script type-"text/javascript'» 

function yetAnotherAlert(textToAlert) ( 
alert(textToAlert); 


J 

yetAnotherAlert("báy là 
</script> 

</head> 

<body> 

</body> 

</html> 


Chú y Trong trường hợp chi xét với muc đích của ví dụ trên, ban có thé 
bỏ qua khai báo DOCTYPE nếu không muốn nhập nó. Tuy nhiên với 


những mục đích khác ngoài quyển sách này, có thể bạn sẽ cần khai báo 
DOCTYPE. Xem lại Chương 1 về vấn đề này. 


2. Chọn Save từ menu File. Hộp thoại Save As được mở ra. Notepad sẽ gắn 
mặc định đuôi .txt cho file vừa tạo trừ khi bạn sử dụng dấu ngoặc kép. Do 
vậy, hãy nhớ đặt tên file trong dấu ngoặc kép, ví du: “myfirstpage.htm”. Nếu 
không có dấu ngoặc kép, Notepad sẽ chèn đuôi .txt vào file của bạn, lúc đó 
tên file sẽ trở thành “myfirstpage.htm.txt”. Hình minh họa dưới đây là ví dụ 
cho việc đặt tên file trong dẫu ngoặc kép. Bạn đừng quên vị trí lưu file này. 


Save in: | (2) Desktop 


(My Documents 
3 My Computer 
*3My Network Places 
For Tester 
| PandaCloudAntivirus 
C3Suu tam 
Google Drive 
Google Talk Received Files 


My Documents 


: File name: ['myirstpage htm" - 
CN ; Save as type: | Text Documents (xt) 


Encoding: | Unicode 


Chú ý Dé không bi lỗi hiển thi tiếng Việt trong Notepad, bạn hãy vào 
menu Format>Font chọn kiểu font, ví du Times New Roman. Khi đó ban 
có thể gõ các ký tự tiếng Việt mà không bị lỗi font. Sau khi hoàn thành, 
lưu lại file bằng cách chọn Save As, trong hộp thoại Save As chọn mục 
Encoding là Unicode. 


3. Dé xem trang html vừa tạo, dùng trình duyệt ưa thích để tìm đến vi trí lưu 
file và chạy file này. (Nếu như bạn lưu file như hình minh họa trên, hãy tìm 
đến màn hinh Desktop). Hình minh họa tiếp theo cho thấy cách Firefox hiển 
thi file html. 


Chú ý Nếu sử dung Windows Internet Explorer, ban có thể nhận được 
cảnh báo về việc truy cập các nội dung bị chặn tuỳ thuộc mức độ bảo 
mật được cấu hình. Hãy truy cập địa chỉ 
http://windows.microsoft.com/en-US/windows7/Internet-Explorer- 
Information-har-fremiently-acked-miestion« để tìm hiểm thầm về tính 


drvi naor AE [ENMQMENIEEUE y aonta YUVILDI KỈ (II A44N- VA CLANCRAA VN V12 


năng này và làm thế nào để tắt nó đi. 


Message from webpage 


À Đây là Chương 2 


Trong ví dụ này, bạn đã tạo đưc web cơ bản có nhúng thêm 
JavaScript. Phần JavaScript của tra eb chỉ chứa một vài phần tử. Trước 
tiên, thé script được gọi và khai báo ngón ngữ sử dung là JavaScript: 


«script type-z"text/javascript"» 


Chú ý Ban có thể khai báo JavaScript bằng cách khác, tuy nhiên đây là cách 


được hỗ trợ rộng rãi nhất. 


Tiếp đó, đoạn mã khai báo hàm yetAnotherAlert nhận vào đối số 
textToAlert như sau 


function yetAnotherAlert(textToAlert) { 


Nội dung của hàm có nhiệm vụ duy nhất là hiển thị một hộp thoại thông báo 
trong cửa sổ trình duyệt. Thông báo được hiển thị có thể là bất kỳ đoạn văn bản 
nào được truyền vào như tham số của hàm. Tất cả được thực hiện bởi lệnh dưới 
đầy: 


alert(textToAlert); 


Hàm kết thúc bởi dấu ngoặc đóng (}). Dòng tiếp theo của đoạn mã goi đến hàm 
mà bạn vừa khai báo với đối số là một chuỗi đặt trong ngoặc kép như sau: 


yetAnotherAlert(“Đây là Chương 2"); 


Như vậy, qua ví dụ sơ lược trên, bạn đã nắm được cách lập trình JavaScript mà 
không dùng IDE. Phần tiếp theo sẽ giới thiệu cách thức phó biến nhất khi sử 
dụng JavaScript đó là dùng các file chứa mã JavaScript nằm ngoài trang web. 


Tạo file JavaScript ngoài không dùng 
IDE 


Lúc này, bạn đã có một trang web (được tạo bằng Notepad) hiển thị một lời 
thông báo khi được duyệt. Đoạn mã JavaScript thực hiện việc này nằm trong cặp 
thẻ <head> của trang. Trong phần tiếp theo, bạn sẽ được hướng dẫn cách lưu mã 
JavaScript vào một external file và đứN: file này trong mã HTML. 


Tao file JavaScript ngoài với Notepad 
Cw 
1. Đầu tiên, mở file myfirstpage.htm. Nếu dang sử dung Notepad, ban có thể 
nhán chuót phái vào file, chon Open With, chon Notepad. 


2. Bồi den đoạn mã JavaScript, ngoai trừ đoạn mã bên trong cáp thé «script» 
</script>. Sao chép đoạn mã đã chọn bằng cách chon Copy từ menu Edit. 


3. Tao file mới để chứa mã JavaScript bằng cách chon New từ menu File. File 
mới tạo được mở ra trong cửa só Notepad. Dán đoạn mã JavaScript vào file 
bằng cách chọn Paste từ menu Edit. Đổi đoạn văn bản là tham số của hàm 
gọi thành “Đây là ví dụ thứ hai”. Đoạn mã có dạng như sau: 


function yetAnotherAlert(textToAlert) { 
alert(textToAlert); 
} 


yetAnotherAlert( “Đây là ví dụ thứ hai"); 


4. Lưu file bằng cách chọn Save từ menu File. Nhập myscript.js vào trường 
File name, hãy nhớ đặt tên file trong dấu ngoặc kép, đuôi file phải là .js, 


không phái là .txt. 


Chú y Ban không cần sử dung đuôi mở rộng của file JavaScript, tuy 


nhiên nó sẽ giúp bạn dễ dàng nhận diện các file về sau. 


5. Với mã JavaScript được lưu trong file myscript.js, ban có thể xóa đoạn mã 
JavaScript trong file myfirstpage.htm, chỉ để lại thẻ script như dưới: 


«script type-"text/javascript'» 
</script> 


Mách nhỏ Hãy nhớ chon xem Al files thay cho Text Documents khi 


cần mở các file không có đuôi .txt nhu đuôi .js hay .htm vừa tao. Chọn 
AII Files từ menu thả xuống Files Of Type trong hộp thoai Open. 


6. Thêm thuộc tính src vào thẻ mở <script> 


«script type-"text/javase data-srcz-z"myscript.js"» 


inh bằng cách xóa dấu chuyển 
g dòng với thé mở. 


Nếu muốn, bạn có thể chuốt đo 
dòng và đưa thẻ đóng «/scrip 


«script type-"text/javascript" data-src="”myscr1pt. Js”></s( 
Lúc này, toàn bộ nội dung của myfirstpage.html sẽ giống như dưới đây: 


«!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt 
www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Trang đầu tiên của tô1</title> 

«script type-"text/javascript" data-src="myscr1pt. Js”"></s( 
</head> 

<body> 

</body> 

</html> 


7. Luu file myfirstpage.htm. 


8. Dùng trinh duyét mö trang web. Kêt quá trå vê sé là hóp thoai thông báo 


“Đây là ví du thứ hai". 


lo B| ã 


( http://localhost:20290/myfir: Ø ~ B ở X | O Trang đầu tiên của tôi | | 
Message from webpage 


+ Đây là ví dụ thứ hai 


cript không sử dung IDE đã kết thúc. 
biên soạn khác cũng rất thích 

ì và Textpad của Helio Software 
anh hơn nhiều. 


Như vậy, bài học cơ bản về lập trình Ja 
Trên đây chỉ là ví dụ với Notepad, r 
hợp cho việc lập trình cơ bản, trong 
Solutions. So với Notepad, hai côn§ 


Gỡ lỗi trong JavaScript 


Việc gỡ lỗi trong JavaScript có thể gặp nhiều khó khăn, đặc biệt khi chúng ta gỡ 
lỗi cho các chương trình phức tạp. Một số công cụ, như là Venkman 
(http:/⁄www.mozilla.org/projects/venkman/), có thể giúp chúng ta gỡ lỗi 
JavaScript, tuy nhiên công cụ chính để gỡ lỗi JavaScript lại là trình duyệt. Các 
trình duyệt phổ biến hiện nay đều cho phép gỡ lỗi JavaScript. Trong các chương 
trình gỡ lỗi, bạn hãy chú ý đến Firebug, một plug-in nổi tiếng của trình duyệt 
Firefox. Ban có thể tải về Firebug tại dia chỉ http://www.getfirebug.com/. 


Có thể nói Firebug gần như không thể thiếu trong việc lập trình web, đặc biệt là 
với JavaScript và AJAX. Phần mềm này cho phép bạn kiểm tra mọi thành phần 
của một trang web, lấy được kết quả của các lời gọi AJAX, xem được CSS, tất 
cả đều trong thời gian thực khiến cho việc gỡ lỗi trở nên dễ dàng hơn. Hình 2-8 
là một ví dụ về dùng Firebug trong gỡ lỗi. 
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& Edi? Body - html Ste" | Computed Larout DOM 
— ÁN emi nay left.css (Ine d) 
7 cp background: ur1("bg_grad.3pg" 
D a 
" color: #333593; 
</html> 


fonb-fanily: àrisl,sans- 
serit; 

lina-height: 1.166; 
nargin: 0; 

padding: 0; 


Done 


Hinh 2-8 Firebug - công cụ không thé thiếu ác lập trình viên web. 


Lời khuyên của tác giả là hãy sử d 
JavaScript. Khi gỡ lỗi JavaScript, à một hàm rất hữu ích. Chỉ cần 
một vài lời gọi alert() hợp lý, bạn tì ri trong các biến và hiểu đoạn mã 
hiện dang làm gi. Hàm alert() sẽ làm xuất hiện hộp thoại thông báo trên trình 
duyệt, nên nếu bạn để hàm alert() trong một vòng lặp và sơ suất để vòng lặp đó 
chay vô hạn, ban sẽ phải thoát khỏi trình duyệt bằng cách bất thường, chăng han 
sử dụng Task Manager. 


cho việc lập trình và gỡ lỗi 


Bài tập 


1. Hãy tạo trang web có tên mysecondpage.htm. Trong phần <body> của trang 
web, tạo đoạn mã làm hiển thị hộp thoại thông báo có nội dung là tên của 
bạn. Chạy thử đoạn mã trên trên ít nhất hai trình duyệt khác nhau. 


2. Sửa trang web tạo trong Bài tập 1 và tạo một hàm trong phần <head> của 
trang đó, sau đó chuyển đoạn mã làm hiển thị hộp thoại thông báo vào trong 
hàm mới đó. Gọi hàm từ đoạn mã trong phần <body>. 


3. Chuyển hàm vừa tao ở Bài tập 2 vào file JavaScript ngoài và tham chiếu 
hoặc gọi tới file này từ trang web của ban. 


Chuong 3 
Cú pháp và câu lệnh trong 
JavaScript 


Sau khi đọc xong chương này, bạn có the: 


= Nắm được các nguyên tác cơ bản khi sử dung ngôn ngữ lập trinh JavaScript. 
= Đặt mã JavaScript trong một trang web. 

= Nhận biết câu lệnh JavaScript. 

» Nhận biết các từ khóa trong JavaScript. 


Một vài công v t vặt 

Phần còn lại của cuốn sách sẽ đề cập cụ thể hơn về những đặc trưng của 
JavaScript và làm thế nào để thực hiện các nhiệm vụ cụ thể. Tuy nhiên, bạn phải 
học đi trước khi học chạy. Vì thế, trước khi tìm hiểu sâu về JavaScript, bạn cần 
nắm được một số cấu trúc từ vựng của nó — đó là các quy tác hay còn được gọi 
là quy tắc cú pháp của ngôn ngữ này. 


Phân biệt chữ hoa chữ thường 

JavaScript phân biệt chữ hoa và chữ thường. Cần chú ý điều này khi đặt tên cho 
biến và sử dụng từ khóa của ngôn ngữ. Một biến được đặt tên là remote sẽ khác 
biến có tên là Remote hay REMOTE. Tương tự, từ khóa cho vòng lặp là while, 
nhưng nếu viết thành WHILE hoặc While thì sẽ gây ra lỗi. 


Các từ khóa được viết bằng chữ thường, còn biến có thể kết hợp tùy ý cả chữ 
hoa và chữ thường miễn là bạn có thể tự kiểm soát được. Ví dụ: Các tên biến 
được liệt kê dưới đây đều là tên biến hợp lệ trong JavaScript. 


buttonOne 
txt1 

a 

C 


Mách nhỏ Ban sé thấy JavaScript thường sử dung chữ thường trong mã, 
ngoai trừ một vài trường hợp cần thiết, ví dụ như hàm isNaN(), dùng để xác 


định xem giá trị đầu vào có phải là số hay không (NaN trong tên hàm có 
nghĩa là Not a Number - không phải số). Ban sẽ học về hàm này trong 
Chương 4 “Làm việc với biến và kiểu dữ liệu” 


Chương 4 sẽ cung cấp thêm kiến thức về biến và quy ước đặt tên, còn bây giờ, 
bạn hãy chú ý đến chữ hoa, chữ thường khi viết tên biến trong JavaScript. 


Ky tự trang 

Trong hầu hết trường hợp, JavaScript bỏ qua ký tự trắng nằm giữa các câu lệnh. 
Bạn có thể thêm ký tự trắng, lùi đầ ặc viết mã theo bất cứ quy ước mã 
nào để đoạn mã JavaScript rõ ràng ơn. Tuy nhiên, có một vài ngoại lệ 
trong quy tắc này. Một số từ khóa, có thể bị thông dịch sai bởi trình 
thông dịch JavaScript khi được đặt c g với từ khóa return khác. Phần 
sau của chương sẽ trình bày ví dụ về vấn đề này. 


Làm cho chương trình dễ đọc là một lý do để sử dụng ký tự trắng. Ví dụ như 
đoạn mã dưới đây dùng rất ít ký tự trắng và khoảng lùi đầu dòng: 


function cubeme(incomingNum) { // Hàm tính lập phuong 


if (incomingNum == 1) { 

return **"**Ban dang làm gi dáy?**"**; 
) else ( 

return Math.pow(incomingNum,3); 

} 

} 


var theNum = 2; 

var finalNum = cubeme(theNum); 

if (isNaN(finalNum)) { 

alert("Ban nén nhó ráng 1 lüy thüa bao nhiêu ván là 1."); 
) else ( 

alert("Láp phuong của " + theNum + " là " + finalNum); 


} 


Bây giờ chúng ta xem xét lai đoạn mã trên có sử dung thêm những khoảng lùi 
đầu dòng. (Bạn có thể tìm thấy đoạn mã này trong file example1.txt, thư mục mã 
nguồn mẫu Chương 3 của phần Tài nguyên đi kèm.) 


function cubeme(incomingNum) { // Hàm tính lập phuong 


if (incomingNum == 1) { 
return **"**Ban dang làm gi dáy?**"**. 
} else { 


return Math.pow(incomingNum,3); 


} 
} 


var theNum = 2; 
var finalNum = cubeme(theNum); 
if (isNaN(finalNum)) { 

alert("Ban nén nhó ràng 1 lüy thüa bao nhiéu ván là 
) else ( 

alert("Láp phương của " + theNum + " là " + finalNum 
} 


Đoạn mã thứ hai thuc thi chức nán 


sjöng n đoạn mã đầu nhưng dễ đọc và dé 
theo dõi hơn! Thực tế là có thể bạn ot chút thời gian để viết mã, nhưng 
bạn sẽ phải làm việc với nó trong nhiề liền. Như trường hợp của tôi khi 
đọc lại đoạn mã sau một năm viết, tôi đã rất vui mừng vì trước đó mình đã viết 
mã một cách dễ đọc và dễ theo dõi. 


Chú thích 

Với việc viết mã và duy trì chúng trong một thời gian dài, chú thích là người bạn 
đồng hành tốt. Những đoạn mã trông hết sức rõ ràng nhưng lần tới đọc lại chúng 
sẽ không được như thế nữa, đặc biệt khi bạn viết từ quá lâu. Chú thích có thể 
được đặt trong đoạn mã JavaScript theo hai cách: chú thích nhiều dòng và chú 
thích một dòng. 


Bạn sẽ quen với chú thích nhiều dòng trong JavaScript nếu như bạn từng sử 
dụng ngôn ngữ lập trình C. Chú thích nhiều dòng bắt đầu bằng ký tự / và kết thúc 
bằng ký tự / như dưới đây: 


/* Đây là chú thích nhiều dòng trong JavaScript 


Giống nhu chú thích trong ngón ngữ C, đoạn chú thích này có : 


Chú thích một dòng bát đầu với hai dấu gạch chéo (//) và không cần ký tự kết 
thúc vì nó chỉ ở trong một dòng. Dưới đây là ví dụ: 


⁄/ Đây là chú thích một dòng. 


Bạn có thể sử dụng nhiều chú thích một dòng. Với những khối chú thích ngắn, 
bạn có thể sử dụng nhiều chú thích một dòng thay vì dạng chú thích nhiều dòng 
như đã trình bày ở trên. Ví dụ như, bạn hãy xem khối chú thích dưới đây: 


⁄/ Đây là một khối chú thích khác. 
// Khối chú thích này có nhiều dòng. 
⁄/ Trước môi dòng có hai dấu gạch chéo. 


Mách nhỏ Với những chú thích ngắn, chỉ dài một hoặc hai dòng, bạn sẽ 
thao tác nhanh hơn nếu sử dung cách chú thích với hai dấu gạch chéo. Với 
những chú thích dài hơn, ví dụ những chú thích ở đầu chương trình hay đầu 


` 


đoạn mã, cách chú thích nhiều dòng là lựa chọn tốt hơn vì nó giúp chúng ta 
có thể dễ dàng thêm hoặc xóa thôi 


Dâu châm phầy 

Trong JavaScript, dấu chấm phầy được sử dụng để phân tách các biểu thức. Về 
mặt kỹ thuật, dấu chấm phẩy là không bắt buộc trong hầu hết các câu lệnh và 
biểu thức. Tuy nhiên, những vấn đề khó lường bạn gặp phải khi không sử dụng 
dấu chấm phẩy có thể gây ra những lỗi không đúng do đó làm tốn thời gian tìm 
và gỡ lỗi. Trong một số trường hợp, trình thông dịch JavaScript có thể tự động 
chèn thêm dấu chấm phẩy khi bạn không muốn. Ví dụ như câu lệnh dưới đây: 


return 
(varName); 


Thông thường, bạn nên viết là: 
return(varName); 


Nhung JavaScript tự ý thêm một dấu chấm phãy vào câu lệnh return, làm cho 
đoạn mã trở thành như dưới đây trong trình thông dịch JavaScript: 


return; 
(varName); 


Đoạn mã này không hoạt động, trình thông dịch đã hiểu nhầm ý của bạn. Nếu 
bạn dùng đoạn mã này trong một hàm, nó sẽ trả về giá tri undefined (không 
xác định) cho hàm gọi, và đó không phải là điều bạn mong muốn. Đây là một ví 
dụ cho thấy chúng ta không nên tùy tiện sử dụng ký tự trắng - bạn cũng không 
thể sử dụng dấu ngắt dòng (nội dung này sẽ được trình bày cụ thể ở phần kế tiếp) 
để tách biệt từ khóa return và giá trị trả ve. 


Việc lập trinh JavaScrip sé trở nên dé dàng hơn nếu ban sử dụng dấu chấm phẩy 
như là một quy tắc thay vì phải nhớ xem không cần dùng nó ở đâu. 


Tuy nhiên, bạn nhất thiết không được dùng dấu chấm phẩy trong trường hợp sau: 
sử dụng vòng lặp và các điều kiện: 


if (a xm) 


// đoạn mã duoc đặt ở 


} 


Trong trường hợp này, bạn sẽ khô lấu chấm phãy ở cuối câu lệnh if 
vì câu lệnh hoặc các khối câu lệnh bé áp dấu ngoặc di sau điều kiện là 
một phần của câu lệnh điều kiện, trong tường hợp này là câu lệnh if. Giả sử 
bạn đặt dấu chấm phẩy cuối câu lệnh i f, phần đầu của câu lệnh if sé bị tách 
khỏi toàn bộ phần còn lại. Ví dụ, đoạn mã ở dưới đây là sai. (Đoạn mã trong cặp 
dấu ngoặc nhọn được thực thi bất kể giá trị a có bằng 4 hay không). 


1f (a == 4); 


⁄/ đoạn mã được đặt ở đây 


Mách nhỏ Không sử dụng dấu chấm phẩy khi viết vòng lặp hoặc khai báo 


hàm. 


Dấu ngắt dòng 


Liên quan chặt chẽ tới ký tự trắng và thậm chí dấu chấm phẩy trong JavaScript là 


dấu ngắt dòng, đôi khi còn được goi là ký tự trở vé đầu dòng. Trong chuẩn 
ECMA-262, dấu ngắt dòng hay còn được gọi là “dẫu kết thúc dòng” được dùng 
để phân biệt một dòng mã với dòng mã tiếp theo. Cũng như dấu chấm phẩy, vị 
trí đặt dấu ngắt dòng cũng cần phải được lưu ý. Có thể thấy từ ví dụ của phần 
trước, đặt sai vị trí dấu ngắt dòng có thể dẫn đến các lỗi khó lường. 


Không có gi ngạc nhiên khi lợi ích thường gặp nhất của dấu ngắt dòng là để 
phân biệt các dòng mã khác nhau cho dễ đọc. Bạn cũng có thể làm cho các dòng 
mã dài dễ hiểu hơn bằng cách xuống dòng. Tuy nhiên, khi làm như vậy, bạn phải 
cán thận với những lỗi như kết quả trả về từ câu lệnh return đã nêu ở trên, 
trong đó dấu ngắt dòng thêm vào có thể gây ra những hiệu ứng không mong 
muốn, làm thay đổi ý nghĩa của đoạn mã. 


Đặt đoạn mã JavaScript đúng vị trí 

Bạn có thể đặt mã JavaScript ở nhiều vị trí trong trang HTML: trong phần 
«head» </head>, hoặc giữa cáp thé «body» </body>. Vi trí phổ biến của 
đoạn mã JavaScript là ở giữa cáp t </head> ở gần đầu trang. Tuy 
nhiên, cách đặt đoạn mã «script <body> đang trở nên phổ biến 
hơn. Bạn phải khai báo trước loại ch bản) mà bạn sử dụng. Vì đây là 
cuốn sách về JavaScript nên chúng t2 báo như sau trong thẻ <scr1pt>: 


«script type-"text/javascript'» 


Một vẫn đề quan trọng cần luu y khi bạn sử dung JavaScript với các trang được 
khai báo dang XHTML là trong các trang này, thẻ «script» cần phải được khai 
báo trong phần CDATA. Nếu không, XHTML sẽ phân tích thẻ «script» như 
một thẻ XML và đoạn mã trong đó có thể không chạy như bạn mong đợi. Do đó, 
để sử dụng JavaScript trong XHTML cần khai báo như sau: 


«script type-"text/javascript'» 
«1[CDATA[ 
// Đoạn mã JavaScript duoc đặt ở đây 


]]> 


</script> 


Các phiên bản trinh duyệt cũ có thể không phân tích chính xác CDATA. Vấn đề 
này có thé được giải quyết bằng cách đặt dòng mở đầu và kết thúc của CDATA 
bên trong dấu chú thích của JavaScript như ví dụ dưới đây: 


«script type-"text/javascript'» 
//«1[CDATA[ 
// Đoạn mã JavaScript duoc đặt ở đây 
⁄/]]> 
</script> 


Khi đặt đoạn mã JavaScript trong một file ngoài (nhu bạn đã doc ở Chương 2 
“Lập trình với JavaScript”), bạn không cần dùng phần CDATA nữa. Bạn sẽ thấy 
rằng ngoại trừ những đoạn JavaScript ngắn nhất, sẽ tốt hơn nếu bạn định nghĩa 
JavaScript trong các file ngoài - thường là với đuôi mở rộng .js - và sau đó liên 
kết các file trong trang. Chương 2 đã mô tả cụ thể vấn đề này, nhưng phần này sẽ 
nói đến cách thức liên kết đến một file sử dụng thuộc tính src trong thẻ 
«script»: 


«script type-"text/javascript" data-src=”myscr1pt.Js”> 
Đặt đoạn JavaScript vào file ngoài có nhiều lợi ích, ví du như: 


ánh dấu: Lưu mã JavaScript vào file 
dễ hơn và giúp giữ cấu trúc của 
A cho XHTML. 

một file ngoài, bạn có thể thay 
ến các file khác của website. 


= Phân tách đoạn mã ra khỏi các thẻ 
ngoài khiến việc bảo trì đoạn 
HTML mà không phải sử dụng 


= Dễ bảo trì: Với việc đặt mã Ja 
đối file đó mà không làm ảnh h 
» Lưu trữ tam thời (Caching): Nếu sử dung file JavaScript ngoài, trinh 
duyệt web có thể lưu trữ tam thời file đó và nhờ thế làm tăng tốc độ tải 
trang web cho người dùng. 


Câu lệnh trong JavaScript 


Cũng như các chương trình được viết bằng ngôn ngữ khác, chương trình được 
viết bằng JavaScript cũng bao gồm các câu lệnh được sắp xếp để trình thông 
dịch JavaScript có thể thực hiện một hay nhiều tác vụ. Và cũng như các ngôn 
ngữ khác, câu lệnh trong JavaScript có thể đơn giản hoặc phức tạp. Phần này sẽ 
mô tả ngắn gọn mẫu câu lệnh JavaScript, với giả định rằng bạn đã xem qua một 
số ví dụ ở các chương trước cũng như ở các chương sau của cuốn sách. 


Câu lệnh JavaScript có những phần tử 
gi? 


Nhu đã trình bày trong Chương 1 “Hiểu hon về JavaScript", câu lệnh JavaScript, 
hay biểu thức, là một tập hợp các từ khóa, toán tử hoặc chuỗi định danh được đặt 
với nhau để tạo thành một chương trình mà trình thông dịch JavaScript có thể 
hiểu được. Câu lệnh thường kết thúc với dấu chấm phẩy, ngoại trừ trong một vài 
trường hợp đặc biệt như lệnh khai báo cấu trúc ré nhánh và vòng lặp như if, 
while, và for được trình bày cụ thé hơn trong Chương 5 “Sử dụng toán tử và 
biểu thức”. 

Dưới đây là một vài ví dụ về câu lệnh cơ bản trong JavaScript: 

var x = 4; 


var y = X * 4; 
alert("Xin chào"); 


Hai loai câu lênh ript 


Câu lênh JavaScript có hai loai co 1: đơn phức hợp. Bạn không cần mát 
nhiều thời gian với khái niệm câu lé dy, ban nên hiểu sự khác nhau giữa 
cầu lệnh đơn và câu lệnh phức hợp. 


Câu lệnh đơn là một câu lệnh như dưới đây: 
var X = 4; 


Câu lệnh phức hợp kết hợp nhiều cấp độ logic với nhau. Một câu lệnh điều kiện 
if/then/else như dưới đây là ví dụ điển hinh cho câu lệnh phức hợp: 


1f (something == 1) { 

// đoạn mã đặt ở đây 
} else { 

// đoạn mã khác được đặt ở đây 
} 


Từ khóa trong JavaScript 


Một số từ trong JavaScript là từ khóa, nghĩa là ban không thể sử dung nó làm 
biến, chuỗi định danh hoặc hằng số trong chương trình của bạn. Nếu bạn làm 
vậy, đoạn mã sẽ gặp những kết quả không mong đợi như bị lỗi. Ví dụ, bạn đã 
thấy từ khóa var trong một vài ví dụ trước đây. Sử dụng từ khóa var ngoài mục 
đích để khai báo biến có thể gây ra lỗi hoặc các hiệu ứng không mong muốn 
khác tùy vào trình duyệt. Ví dụ như câu lệnh dưới đây: 


// Không được viết nhu thé này! 
var var = 4; 


Đoạn mã ví dụ này không dẫn đến lỗi trực tiếp trên trình duyệt, nhưng nó sẽ 
không hoạt động như bạn mong muốn. 

Danh sách dưới đây bao gồm những từ được dùng làm từ khóa theo chuẩn 
ECMA -262: 


break delete if this while 
case do in throw with 


catch else instanceof try 


continue finally 


debugger 
default 


function switch 


Một số từ khóa khác (được liệt kê ở danh sách dưới đây) được dành cho các mục 
đích sử dụng trong tương lai và do đó bạn không nên sử dụng chúng trong 
chương trình của mình. 


class enum extends super 


const export import 
Danh sách các từ khóa dưới đây được dành để sử dung trong chế độ strict: 


implements let private public yield 


interface package protected static 


So lược vé hàm 


Ban đã được xem nhiều ví dụ về hàm ở các chương trước. JavaScript có nhiều 


hàm có sẵn hoặc hàm do bản thân ngôn ngữ này dinh nghĩa. Chúng ta đã đề cập 
đến hàm a1ert( ) ngoài ra còn nhiều hàm khác nữa. Tùy theo phiên bán ngôn 
ngữ mà bạn đang sử dụng, sẽ có các hàm có sẵn khác nhau. Nhiều hàm chỉ có ở 
các phiên bản gần đây của JavaScript — những phiên bản chỉ được hỗ trợ bởi một 
số trình duyệt. Tìm ra các hàm (và các đối tượng) có sẵn trên trình duyệt là một 
công việc quan trọng để xác định xem trình duyệt của người dùng có thể chạy 
mã JavaScript mà bạn tạo trên trang web của mình không. Nội dung này sẽ được 
đề cập ở Chương 11 “Các sự kiện trong JavaScript và làm việc với trình duyệt”. 


Mách nhỏ Một nguồn thông tin rất hữu ích về sự tương thích trình duyệt là 


trang web QuirksMode: (http://www.quirksmode.org/compatibility.html). 


Tương tự các ngón ngữ lập trinh khác, JavaScript cũng chấp nhận các hàm người 
dùng định nghĩa. Ví dụ trước đấy trong chương này đã định nghĩa một hàm có 
tên cubeme( ) dé tính lập phương của một số. Đoạn mã đó cũng cho thấy cách 
dùng JavaScript ở cả thẻ <head> và <body> của trang web. 

i. 


Đặt hàm người dùng định nghĩa trong JavaScript 


1. Dùng Visual Studio, Eclipse, `... rình soạn thảo khác, thay đổi file 
example1.htm trong thư mục mã nguồn mẫu của Chương 3. 


2. Trong trang web, thay thế dòng chú thích TODO bằng đoạn mã in đậm dưới 
đầy: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«script type-"text/javascript'» 

function cubeme(incomingNum) { 


if (incomingNum == 1) { 

return "Ban dang làm gi dáy?"; 
) else ( 

return Math.pow(incomingNum,3); 
J 

} 


</script> 


<title>Ví dụ Chương 3«/title» 

</head> 

<body> 

«script type-"text/javascript'» 

var theNum - 2; 

var finalNum - cubeme(theNum); 

if (isNaN(finalNum)) ( 

alert("Ban nén nhó ráng 1 lüy thüa bao nhiéu ván là 1."; 
) else ( 

alert("Láp phuong của " + theNum + " là " + finalNum); 


</script> 
</body> 
</html> 


3. Luu file này lại, sau đó chay đoạn mã hoặc sử dung trinh duyệt để mở trang 
web. Bạn sẽ thấy một thông báo như sau: 


Message from webpage —À 


A Làp phuong cùa 2 là 8 


Đoạn má trong ví dụ này kết hợp đoạn mã từ ví du trước đó để tạo thành một 
trang HTML hoàn chỉnh, bao gồm cả khai báo DOCTYPE. Đoạn mã này khai 
báo một hàm là cubeme( ) trong thẻ <head> của tài liệu, như sau: 


function cubeme(incomingNum) { 
if (incomingNum == 1) { 
return "Ban dang làm gi dáy?"; 
) else ( 
return Math.pow(incomingNum,3); 
} 


j 


Hàm này chấp nhận một đối số là incomingNum. Câu lệnh điều kiện if/then 


là trọng tâm của hàm. Khi incomingNum bằng 1, hàm sé trả về chuỗi ký tự “Bạn 
đang làm gi đấy?”. Và ngược lại, khi incomingNum khác 1, phương thức 

Math. pow được gọi với 1ncom1ngNum và số nguyên 3 là đối số. Việc gọi hàm 
Math. pow đã tăng giá trị của incomingNum lén lũy thừa bậc 3 và giá trị này 
được trả về hàm gọi. Cách thức gọi hàm sẽ được đề cập tiếp ở Chương 4. 


Toàn bộ đoạn mã trước đều được đặt trong thẻ <head> của tài liệu, do đó nó có 
thể được các đoạn mã khác gọi đến; đây chính là việc mà chúng ta sắp thực hiện. 
Trình duyệt khi đó sẽ hiển thị phần <body> của tài liệu, bao gồm một vài đoạn 
mã JavaScript khác. Và đoạn mã tiếp theo này sẽ gán cho biến theNum giá trị 
bằng 2. 


var theNum = 2; 

Sau đó, đoạn mã sẽ gọi hàm được định nghĩa trước đó là cubeme ( ), sử dụng 
biến theNum làm đối số. Cần chú ý rằng biến finalNum sẽ nhận giá trị trả về từ 
hàm cubeme( ), như dưới đầy: 


var finalNum = cubeme ( theNum 

rang I; âp hợp các điều kiện if/then. 
Đoạn mã này kiểm tra để xác định trả về được lưu trong biến 
finalNum có là số hay không, bằng cách Sử dung hàm isNaN( ). Nếu giá trị trả 
về không phải là số, hộp thoại thông báo sẽ được hiển thị với nội dung cho thấy 
1 đã được dùng làm đối số (Tất nhiên có nhiều lý do khiến giá trị trả về không 
phải là số, tuy nhiên chúng ta hãy tạm thời chấp nhận ví dụ đã nêu). Nếu như giá 
trị trả về là số, số đó được hiển thị, và bạn có thể thấy ở hộp thoại của hàm 
alert() hiến thi giá trị như ở bước 3 bên trên. 


Đoạn mã JavaScript cuối cùng tro 


Chế độ strict của JavaScript 


ECMA-262 phiên bản 5 giới thiệu một biến thể nghiêm ngặt, thường được gọi là 
chế độ strict, trong đó có cải tiến chức năng kiểm tra lỗi và bảo mật. Ví dụ, để 
chán nguy cơ gó nhầm tên biến, việc khai báo biến bắt buộc phái sử dụng từ 
khóa var. Thêm vào đó, những thay đổi hàm eva1( ) và các khía cạnh khác 
cũng giúp chúng ta nâng cao chất lượng mã JavaScript. 


Chế độ strict được kích hoạt bằng cú pháp rất giống với cú pháp dùng trong Perl: 


"use strict"; 


Chế độ strict có pham vi cuc bộ tại khói mà nó được sử dung vì thé ban có thể 
kích hoạt toàn cục bằng cách đặt dòng use strict ở đầu đoạn mã JavaScript 
hoặc ban có thể kích hoạt nó trong một hàm, bằng cách đặt dòng use strict 
trong chính hàm đó ví dụ như: 


function doSomething() { 
"use strict"; 
//Đoạn mã của hàm được đặt ở đây. 


} 


Một cải tiến khác trong chế độ strict có thể bắt được lỗi đánh máy là tính năng 
ngăn chặn các biến chưa được khai báo. Tất cả các biến trong chế độ strict cần 
được khói tạo trước khi sử dụng. Ví dụ như câu lệnh dưới đây: 


"use strict"; . 
x = 4, // Tao ra lôi cú pháp 


Đoạn mã này sẽ gây lỗi vì biến x vẫn ược khai báo trước với từ khóa var, 


như dưới đây: 


"use strict"; 
var x = 4; // Cú pháp này 1 


Một cải tiến dáng chú ý về báo mật mà ché độ strict mang lại là thay đổi cách 
thức vận dung hàm eva1 ( ). Trong chế độ strict, eva1( ) không thể khởi tạo 
một biến hoặc hàm mới để dùng bên ngoài câu lệnh eva1( ). Ví dụ: 


"use strict"; 
eval("var testVar = 2;"); _ 
alert(testVar); // Tao ra lói cü pháp. 


Trong đoạn mã ví dụ, sé có một lỗi cú pháp vi chế độ strict được kích hoạt làm 
cho biến testvar không truy xuất được bên ngoài câu lệnh eval( ). 


Chế độ strict cũng ngăn chặn việc trùng tên biến trong một đối tượng hoặc một 
lời gọi hàm: 


"use strict"; 
var myObject -( 
testVar: 1, 
testVar: 2 


Is 


Đoạn mã trên sé gây ra lỗi ở chế độ strict vi bién testVar được thiết lập hai làn 
trong đoạn mã định nghĩa đối tượng. 


Cũng như các tính năng khác của ECMA-262 phiên bản 5, chế độ strict có thể 
không khả dụng ở tất cả các trình duyệt và nhiều khả năng không chạy được trên 
các trình duyệt cũ. Bạn có thể tìm hiểu thêm thông tin về ECMA-262 phiên bản 
5 và ví dụ đầy đủ tại đây: http://besen.sourceforge.net/. 


Bài tập 


1. Câu lệnh JavaScript nào dưới đây hợp lệ? (Chọn tất cả các đáp án có thể) 


if (var == 4) { // Viết mã ở đây } 
var testVar = 10; 
if (a == b) { // Viết 
testVar - 10; 
var case - "Yes"; 


y đây } 


[^e eed 


2. Düng hay sai: Ban bát buóc phá 
các câu lệnh JavaScript? 


chấm phẩy để kết thúc toàn bộ 


3. Kiểm tra đoạn JavaScipt dưới đây. Kết quả sẽ như thế nào? (Giả định rằng 
khai báo JavaScript đã có và đoạn mã này được đặt hợp lệ trong phần 
<head> của trang). 


var orderTotal - 0; 
function collectOrder(numOrdered) ( 
if (numOrdered » 0) { 
alert("Ban đã đặt " + orderTotal); 
orderTotal = numOrdered * 5; 


return orderTotal; 


j 


Chuong 4 
Làm việc với biến và kiểu dữ liệu 


Sau khi đọc xong chương này, bạn có thể: 


= Hiểu về các kiểu dữ liệu cơ sở trong JavaScript. 
= Sử dụng các hàm liên quan với các kiểu dữ liệu. 
= Tao các biến. 

» Định nghĩa các đối tượng và mảng. 

= Hiểu về pham vi của biến. 

= GG lỗi JavaScript bằng Firebug. 


Kiểu dữ liệu tr avaScript 


Kiểu dữ liệu của một ngôn ngữ xác định những thành phần cơ bán có thể được 
sử dụng trong ngón ngữ đó. Bạn có thể đã quen thuộc với các kiểu dữ liệu như 
kiểu chuỗi hoặc số nguyên trong các ngôn ngữ khác. JavaScript có từ ba tới sáu 
kiểu dữ liệu tùy thuộc vào định nghĩa về kiểu dữ liệu. Bạn sẽ thường xuyên làm 
việc với tất cả các kiểu dữ liệu này tuy nhiên một số kiểu có thể được dùng nhiều 
hơn các kiểu khác. 


Sáu kiểu dữ liệu trong JavaScript được thảo luận trong chương này bao gồm: 


= Kiểu số 

= Kiểu chuỗi 

» Kiểu logic 

= Kiểu null 

» Kiéu undefined (Khóng xác dinh) 
4 Kiểu đối tượng 


Ba kiểu dữ liệu đầu tiên — kiếu số, chuỗi và logic — có lẽ đã trở nén quen thuộc 
với tất cả các lập trình viên. Ba kiểu dữ liệu sau — kiểu null, undefined và đối 
tượng — cần được giải thích thêm. Ngay sau đây, chúng ta sẽ xem xét từng kiểu 
dữ liệu và sẽ tìm hiểu kỹ hơn về kiểu đối tượng trong Chương 8 “Các đối tượng 
trong JavaScrIpt”. 


Bên cạnh đó, JavaScript còn có một vài kiểu dữ liệu tham chiếu khác như kiểu 

Array, Date và RegExp. Kiểu Date (ngày tháng) và RegExp (biểu thức chính 
quy) được thảo luận trong chương này, còn kiểu Array (mảng) sẽ được bàn tới 
trong Chương 8. 


Làm việc với kiểu dữ liệu số 

Kiểu dữ liệu số trong JavaScript đơn giản là những con số. Tuy nhiên, những lập 
trình viên đã quen với kiểu dữ liệu trong các ngôn ngữ như C sẽ thấy ngạc nhiên 
vì số nguyên và số thực dấu chấm động trong JavaScript không được tách riêng. 
Cả hai đều là kiểu số hợp lệ trong JavaScript. Ví dụ: 


4 
51.50 
-14 
Oxd 


Ví dụ cuối cùng, 0xd là một số nguyên hé thập lục phân (hé cơ số 16). Cả số hệ 
thập lục phân và hệ bát phân (hệ cơ số 8) đều hợp lệ trong JavaScript và bạn sẽ 
không ngạc nhiên khi biết rằng JavaScript chấp nhận việc thực hiện phép toán 
trên các số thuộc những định dạng này. Hãy thử làm bài tập sau. 


Thực hiện tính toán trên hệ cơ số 16 với JavaScript 


1. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác, 
chỉnh sửa file example.htm trong thư mục mã nguồn mẫu của Chương 4 
trong phần Tài nguyên đi kèm. 

2. Trong trang này, thay thế chú thích TODO bằng đoạn mã in đậm sau (ban có 
thể tìm thấy đoạn mã này trong file example1.txt của phần Tài nguyên đi 
kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 

«title» Số dang tháp luc phân </title> 
«script type-z"text/javascript'"» 

var h Oxe; 

var i 
var j 
alert(j); 
</script> 
</head> 
<body> 
</body> 
</html> 


HoH Ig 
© 
X 
N 


3. Dùng trình duyệt mở trang web. Ban sé thấy một hộp thoai như sau: 


Message from webp... MÀ 


' WE 


Đoạn mã trên khai báo hai biến (bạn sé tìm hiểu về khai báo biến trong phần sau 
của chương này) và thiết lập cho chúng giá trị thập lục phân tương ứng là 0xe 
(14 trong hệ thập phân) và 0x2 (2 trong hệ thập phân). 


var h 
var i 


= 0xe; 

= 0x2; 

Sau đó, khai báo một biến mới và gán cho nó giá trị bằng tích của hai bien trước 
như sau: 


var j = h * 1; 


Biến kết quả sau đó được truyền vào hàm alert() và hiển thi ra hộp thoại ở bước 
3. Thật thú vị khi thực hiện nhân hai giá trị thập lục phân mà kết quả nhận được 
trên hộp thoại lại là một giá trị thập phân. 


Các hàm số học 


JavaScript tích hợp sẵn các hàm (và đối tượng) để làm việc với các giá trị số. 
Tiêu chuẩn (ECMA) của Hiệp hội Sản xuất Máy tính châu Âu đã định nghĩa rất 
nhiều hàm. Một trong số những hàm phổ biến là 1 sNaN( ). 


NaN là viết tắt của cum từ Not a Number, có nghĩa là “không phải số hợp lệ”. 
Ban sử dụng hàm isNaN( ) để xác định một số có hợp lệ theo đặc tả ECMA-262 
hay không. Ví dụ, kết quả của một phép chia cho 0 không phải là số hợp lệ trong 
JavaScript. Chuỗi giá trị “Đây không phải là một số” đương nhiên không phải là 
số. Mặc dù mỗi người lại có cách hiểu khác nhau để phân biệt đâu là số và 
ngược lại. Theo hàm isNaN( ), chuỗi ky tự “bốn” không phải là số, tuy nhiên 
chuỗi “4” thì lại là số. Hàm isNaN( ) luôn cố gắng chứng minh giá trị của một 
biến không phải là số. Dưới đây là một số ví dụ bạn có thể thử để xem một giá 
trị như thế nào là số không hợp lệ 


Thuc hành với hàm isNaN( ) 


1. MG trinh duyét IE. 
2. Trên thanh dia chỉ, nhập dòng 1 (CÓ trong file isnan.txt của phần Tài 
nguyên đi kèm): 


javascript:alert(isNaN("4")); 


Ban nhàn dugc mót hóp thoai vói thóng báo False nhu hinh sau: 


Message from webp... T) 
| 
ih. false | 


Hàm isNaN() trả về false cho biểu thức trên vi giá tri nguyên 4 là một số. Nhớ 
rằng đoạn mã trên trả lời cho câu hỏi “Có đúng 4 không phải là số?”. Vì 4 đúng 


"4 


là số, do đó kết quả trả về là false (sai). 

Bây giờ, hãy xem xét ví dụ sau: 

1. Mở trình IE. 

2. Trên thanh địa chỉ, nhập: 
javascript:alert(isNaN("bOn")); 


Ban nhận được một hộp thoai với thông báo true (đúng) như sau: 


Message from webp... —— 


À true 


— 4 


Trong trường hợp này, vì chuỗi ký tt ng phái là số, nén hàm trả vé 
true: chuỗi bón không phải là số. Việc có ý sử dung dấu nháy kép trong mỗi ví 
dụ ("4" và “bốn ”) nhằm chỉ ra rằng với hàm này, dấu nháy kép không gây ra 
lỗi. Vì JavaScript đủ thông minh để nhận ra “4” là số, nó sé tự chuyển đối kiểu 
cho bạn. Mặc dù vậy, sự chuyển đổi này đôi khi gây bất tiện, chăng hạn như khi 
bạn làm việc với biến hoặc giá trị thuộc một kiểu nhất định. 


Hàm 1sNaN( ) thường được dùng để kiểm tra xem dữ liệu đầu vào - có thể là từ 
form - thuộc dạng số hay ký tự. 


Các hằng số số học 


Nhiều hằng số số học có sẵn trong JavaScript, một số được mô tả ở Bảng 4- 
1. Các hằng số này luôn sẵn dùng khi cần. 


Bảng 4-1 Các hằng số số học chọn lọc. 


[Hàng số|Miêu tá| 

|- 

|Infinity|[Thể hiện giá trị duong vô cực.| 

|Number.MAX_VALUE|Số lớn nhất có thể được biểu diễn trong JavaScript.| 
|Number.MIN_VALUE|Số nhỏ nhất có thể được biểu diễn trong JavaScript.| 
|Number.NEGATTVE_TNEFTNTTTY|Giá trị ầm vô cực.| 

INumber.POSITIVE INFINITY|Giá trị duong vô cực. 


Đối tượng Math 


Math là đối tượng đặc biệt có sẵn để làm việc với các số trong JavaScript. Một 
số thuộc tính hữu ích của Math khi lập trình JavaScript bao gồm thuộc tính trả 
vê giá trị của số pi, cán bậc 2 của một số, số giả ngẫu nhiên (pseudo-random) và 
giá trị tuyệt đối. Một số là thuộc tính giá trị, nghĩa là nó trả về giá trị, số khác 
hoạt động như các hàm và trả về giá trị thông qua đối số truyền vào. Hãy xem 
một ví dụ về thuộc tính giá trị Math. PT: 


javascript:alert(Math.PI); 


Kết quả được thé hiện nhu Hinh 4- 


Message from webpage 


ih. 3.141592653589793 


Hinh 4-1 Xem giá trị của _ thuộc tính Math.PI 


Ký hiệu dấu chấm 


Ký hiệu dấu chấm don hay dot được dùng để truy xuất các thành phần của 


một đối tượng.Dấu chấm (.) phân tách các thành phần. Ví dụ, để truy xuất 
thuộc tính “chiều dài của biến room”, bạn có thể viết là `room.length_. Toán 
tử (.) được sử dụng tương tự nhau trong nhiều ngôn ngữ lập trình. 


Đối tượng Math còn rất nhiều thuộc tính khác có thể hữu ích cho chương trinh 
của bạn. Một vài trong số đó hoạt động như hàm hoặc phương thức trên đối 
tượng và được liệt kê trong Bảng 4-2. Bạn có thể xem đầy đủ các thuộc tính của 
đối tượng Math trong đặc tả ECMA-262 tại http://www.ecma- 
international.org/publications/files/ECMA-ST/Ecma-262.pdf. 


BÁNG 4-2 Các thuộc tính của đối tượng Math. 


Hằng số Miêu tả 

Math.random() Trả về một số ngẫu nhiên. 
Math.abs(x) Trả vé giá trị tuyệt đối của x. 
Math.pow(x,y) Trà về giá tri x^y. 


Math.round(x) Làm tròn x tới giá tri gần nhất. 


Làm việc với chuối 
Chuỗi là một kiểu dữ liệu cơ bản khác trong JavaScript. Chuỗi bao gồm một 
hoặc nhiều ký tự nằm trong dấu nhá ụ sau là chuỗi: 


= "Hello world" 
"B" 

= "Đây là một chuỗi khác" 
Cần giải thích thêm về ví dụ cuối trong danh sách trên. Chuỗi được bao quanh 
bởi dấu nháy đơn hoặc kép. Chuỗi nằm trong dấu nháy đơn có thể chứa các dấu 
nháy kép. Tương tự, một chuỗi nằm trong dẫu nháy kép, như bạn thấy trong ví 
dụ trên, có thể chứa các dấu nháy đơn. Vì vậy, nếu chuỗi được bao quanh bởi 
một loại dấu nháy, bạn có thể sử dụng dấu nháy khác bên trong nó. Sau đây là 
một số ví dụ: 

= 'Bó kêu "moo".' 

„Đồng hồ thông báo "12h trua".' 

» “Ai cũng có khoảng thời gian tuyệt vời" là khẩu hiệu chính thức. " 


Thoát ký tự nháy 


Nếu bạn sử dụng cùng một loại dấu nháy (nằm ở trong chuỗi, và bao quanh 


chuỗi) và muốn dấu nháy nằm ở trong chuỗi hiển thi như một ký tự binh thường 
chứ không phải là một phần của cú pháp thông báo cho JavaScript biết là hết 
chuỗi bạn có thể dùng ký tự số chéo ngược (backslash ) đặt ngay trước dấu nháy. 
Ví dụ: 


= “lôi dang sử dụng 'dấu nháy don' cả trong và ngoài ví dụ này. ' 


ua TT 


= “Đây là ví du "tuyệt vời" vé việc sử dung "dấu nháy kép" trong một chuỗi" 
Các ký tự thoát khác 


JavaScript cho phép kết hợp ký tự sổ chéo ngược với một số ký tự thông thường 
tạo thành chuỗi ký tự thoát để biểu diễn một số ký tự đặc biệt. Bảng 4-3 trình 
bày những chuỗi ký tự thoát này. 


BẢNG 4-3 Chuỗi ký tự thoát trong JavaScript. 


Chuỗi ký tự thoát Giá trị hiển thị 


b Dấu xóa 

t Dấu tab 

n Xuóng dóng 

v Dấu tab doc 

f Sang trang 

r Trở về đầu dòng 
\ 


Dấu số chéo ngược 
Sau đây là ví dụ về cách dùng một số chuỗi ký tự thoát (Xin thứ lỗi trước vì tôi 
tiếp tuc sử dụng hàm alert( ). Tôi sẽ sớm dùng thêm các cách phức tap hon để 


hiển thị kết quả trả về). 


Sử dụng các chuỗi ký tự thoát 


1. Mở trình duyệt IE. 


2. Trên thanh địa chỉ, gõ dòng lệnh sau (bạn cũng có thể thấy dòng lệnh này 
trong file escapesequences.txt của phần Tài nguyên đi kèm): 


javascript:alert( "xin chàottxin chàontam biệt"); 


Hộp thoại sau xuất hiện (nếu hộp thoại không xuất hiện, hãy đóng và mở lại 


trình duyệt). Chú ý rằng trên một số trinh duyệt, cháng han Chrome, cách sử 
dụng ký tự tab như trong ví dụ trên là không chính quy. 


Message from webpage — 


xin chào xin chào 
tam biét 


Đây là cách dùng chuỗi ky tự thoát trong thực tế. Trong đoạn mã, hộp thoại hiển 
thị hai từ “xin chào” bao quanh là hai dấu tab, biểu diễn bởi chuỗi ký tự thoát t, 
sau đó là một ký tự xuống dòng biểu diễn bởi n, cuối cùng là từ “tạm biệt”. 


Các phương thức và thuộc tính của chuỗi 


JavaScript định nghĩa một số thuộc tín 
Các thuộc tính và phương thức nà 
trình bày ở phần trước của chương 
viên. 


phương thức để làm việc với chuỗi. 
ập bằng dấu chấm (“.”) đã được 
ø đã quen thuộc với nhiều lập trình 


Chú ý Như đã thống nhất, cuốn sách này chỉ liệt kê một số thành phần trong 
JavaScript, một số thuộc tính và phương thức chính của kiểu chuỗi trong đặc 


tả ECMA-262. Tham khảo đặc tả này để có thông tin đầy đủ hơn về các 
phương thức và thuộc tính của chuỗi. 


Thuộc tính length trong đối tượng string đại diện cho chiều dài của chuỗi, 
không tính dấu nháy kép kèm theo. Thuộc tính này có thể được gọi trực tiếp trên 
chuỗi như trong ví dụ sau: 


alert( "Đây là một chuỗi. ", length); 


Tuy nhiên, cách dùng phổ biến hơn là gọi thuộc tính 1ength trên một biến như 
Sau: 


var x = "Đây là một chu6i."; 
alert(x.length); 


Cả hai ví dụ đều cho ra cùng một kết quả, ban có thể xem ở ví du tiếp theo dưới 
đầy. 


Lấy chiều dài của một chuỗi 
1. Mở trình duyệt IE. 


2. Trên thanh địa chỉ, gõ dòng lệnh sau (bạn có thể thấy dòng lệnh này trong 
file stringlength.txt của phần Tài nguyên đi kèm): 


javascript:alert( "Đây là một chuói.".length); 


Kết quả là một hộp thoại hiển thi 17 nhu sau: 


Message from webp... [esm] 


À 1 


1. Bây giờ, thử nhập đoạn mã sau trên thanh dia chi: 
javascript:var x = "Đây là một chuỗi."; alert(x.length); 
Kết quả là hộp thoại hiển thị kết quả 17 như hình trên. 


Phương thức substring trả về chuỗi con bao gồm các ky tự từ đối số đầu tiên 
tới ký tự kê trước đối số thứ hai nhu trong ví dụ sau: 


alert(x.substring(0,3)); 


Ví du tiếp theo trả về các ký tự từ vi trí đầu tiên đến vi trí thứ 5 của chuỗi x. Ví 
dụ: 


var x = "Steve Suehring"; 
alert(x.substring(0,5)); 


Kết quả là hộp thoại hiên thi chuỗi "Steve".3. 
javascript:var x = "Đây là một chuỗi."; alert(x.length); 


Kết quả là hộp thoại hiển thị kết quả 17 như hình trên. 
Phương thức substring trả về chuỗi con bao gồm các ky tu từ đối số đầu tiên 
tới ký tự kê trước đối số thứ hai nhu trong ví dụ sau: 


alert(x.substring(0,3)); 


Ví du tiếp theo trả về các ký tự từ vi trí đầu tiên đến vi trí thứ 5 của chuỗi x. Ví 
dụ: 


var x = "Steve Suehring"; 
alert(x.substring(0,5)); 


Kết quả là hộp thoại hiển thi chuỗi "Steve". 


Cách xác định chỉ số 


Cách xác định chỉ số trong phươi 1 bstring tương đối khác, hoặc ít 
nhất theo tôi là như vậy. Ký tự đã ai điện bởi số nguyên 0. Điều này 
hoàn toàn bình thường, vì 0 đượ à chỉ số đầu tiên trong nhiều 
ngôn ngữ lập trình. Tuy nhiên, chỉ số €u6i trong phương thức substring 
lại lớn hơn chỉ số của ký tự cuối cùng trong chuỗi con 1 đơn vị. 


Thông thường, ban sẽ nghĩ với giá tri chỉ số là 0 và 5 ( nhu trong ví dụ trên), 
kết quả nhận được sé là 6 ký tự đầu tiên, từ 0 tới 5, đó là chuỗi "Steve ", 
kết thúc bằng một ký tự trắng. Tuy nhiên, rất tiếc không phải vậring` lớn hơn 
chuỗi con mà bạn mong muốn 1 đơn vị và chuỗi con này không bao gồm ký 
tự đó. 


Ngoài substring, một số phương thức của chuỗi được sử dung phó biến là 
slice, substr, concat, toUpperCase, toLowerCase và các phương thức so 
khớp nhu match, search và replace. Sau đây, tôi sẽ giới thiệu cụ thể từng 
loại. 


Các phương thức thay đối chuỗi bao gồm slice, substring, substr và 
concat. Phương thức s1ice và substring trả về chuỗi giá trị dựa trên một 
chuỗi khác. Chúng chấp nhận hai đối số: vị trí đầu và vị trí cuối tùy chọn. Dưới 


đây là một số ví du: 


var myString - "Bién là mót chuói."; 
alert(myString.substring(3)); //Trà về "n là một chuỗi." 
alert(myString.substring(3,9)); //Trà vé "n là m" 
alert(myString.slice(3)); //Trà vé "n là một chuỗi." 
alert(myString.slice(3,9)); //Trà về "n là m" 


Phuong thức substr cũng chấp nhận hai đối số: đối số đầu là vi trí đầu để trả 
về, đối số thứ hai là số ký tự trả về chứ không phải vị trí kết thúc (khác với 
substring/slice). Xem xét ví dụ với substr: 

var myString = "Biến là một chuỗi."; 


alert(myString.substr(3)); //Trà về "n là một chuỗi."(Giống : 
alert(myString.substr(3,9)); //Trà về "n là một " (Khác subs 


Phương thức concat nối hai chuỗi với nhau: 
var  firstString = "Hello "; 


var finalString = firstStri 
alert(finalString); //Trá 


oncat("World"); 
o World" 


Phương thức toUpperCase và to 
loai là toLoca1eUpperCase và to 
trong chuỗi thành chữ hoa hoặc chữ thường: 


cùng với hai phương thức cùng 
owerCase chuyển tất cả các ky tự 


var myString = "biến là một Chuỗi"; g 
alert(myString.toUpperCase()); // "BIÊN LÀ MÓT CHUOI" 
alert(myString.toLowerCase()); // "bién là mót chuói" 


Chú ý Các phương thức toLocale thực hiện chuyển đối tùy theo từng vùng 


xác định. 


Như tôi đã nói ở phần trước, có rất nhiều phương thức và thuộc tính của chuỗi. 
Bạn có thể tìm hiểu danh sách phương thức và thuộc tính đầy đủ tai địa chỉ 
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf. 


Kiểu logic 


Trong JavaScript, kiểu logic (Boolean) là một kiểu dữ liệu bi động. Bi động 


nghĩa là kiểu logic không được dùng như kiểu số và chuỗi; ban vẫn có thé khai 
báo và sử dụng biến logic nhưng thông thường nó chỉ được sử dụng để xác định 
giá trị cho các biểu thức logic. Kiểu logic chỉ có hai giá trị true hoặc fa1se, 
được dùng để đánh giá biểu thức logic trong các câu lệnh điều kiện ví dụ nhu 
if/then/else. 


Xem xét doan má sau: 


If (myNumber > 18) { 

⁄/ Viết mã ở đây 

} 

Biểu thức logic được sử dung làm điều kiện trong câu lệnh if để xác dinh khi 
nào đoạn mã trong dấu ngoặc nhọn {} sẽ được thực thi. Nếu biến myNumber có 
giá trị lớn hơn 18, biểu thức logic sẽ có giá trị true (đúng), ngược lại có giá trị 
false (sai). 


Kiéu Null 


Null là một kiểu dữ liệu đặc biệt t 
ngón ngữ lập trình). Khi một biến 1] 
cả. Tuy vậy, nu11 khác với giá trị róng 
chuỗi rỗng sẽ có dạng như sau: 


ript (cũng như trong hầu hết các 
không là gì và cũng không chứa gì 
dụ, khai báo và thiết lập một biến là 


var myVariable = ''; 


Biến myVariable là rỗng, nhưng không phái là nu11. 


Undefined 

Undefined (không xác định) là trang thái, đôi khi được dùng như là giá trị, biểu 
thị biến chưa chứa giá trị nào. Trang thái này khác so với nu11, mặc dù cả nu11 
và undefined có thể được đánh giá như nhau. Ban sẽ hoc cách phân biệt giữa 
giá trị null và undefined trong Chương 5 “Sử dụng toán tử và biểu thức”. 


Kiểu đối tượng 


Tương tự như hàm, nội dung chỉ tiết về đối tượng được trình bày trong một 


chương riêng (Chương 8). Tuy nhiên, chương này, sé giới thiệu ngắn gon về đối 
tượng. JavaScript là ngón ngữ dựa trên đối tượng, chứ không phải là ngôn ngữ 
hướng đối tượng. Tuy nhiên, JavaScript cũng có các chức năng tương tự như 
một ngôn ngữ hướng đối tượng và trong hầu hết các cách sử dụng JavaScript cơ 
bản, bạn sẽ không nhận thấy có sự khác biệt. 


Đối tượng trong JavaScript là tập hợp các thuộc tính, mỗi thuộc tính chứa một 

giá trị cơ bản. Các thuộc tính - được hiểu như là chìa khóa - cho phép truy xuất 
tới các giá trị. Mỗi thuộc tính có thể chứa một giá trị, một đối tượng hoặc thậm 
chí một phương thức. Bạn có thể khai báo các đối tượng bằng JavaScript, hoặc 
sử dụng những đối tượng có sẵn. 


Đối tượng được tạo bằng cặp dấu ngoặc nhọn, đoạn mã dưới đây tạo một đối 
tượng rỗng có tên là myObject: 


var myObject = {}; 


Còn đây là ví dụ về một đối tượng có nhiều thuộc tính: 


H fb 


Ví du trên tao đối tượng dvdCatalog có hai thuộc tính: identifier và name. 
Giá trị của mỗi thuộc tính tương ứng là 1 và "Coho Vineyard". Ban có thé 
truy xuất thuộc tính name của đối tượng dvdCatalog như sau: 
alert(dvdCatalog.name); 


var dvdCatalog - ( 
"identifier": "1", 
"name"; "Coho Vine 


Sau đây là ví dụ hoàn chinh về đối tượng (bạn có thể tìm thấy đoạn mã này trong 
file object.txt). 


⁄/ Tạo một đối tượng mới sử dụng dấu ngoặc nhọn 

var star = {} 

⁄/ Tạo bốn đối tượng được đặt tên theo tên của bốn ngôi sao 
star["Polaris"] = new Object 

star["Deneb"] - new Object; 

star["Vega"] = new Object; 

star["Altair"] - new Object; 


Các phần tiếp theo của cuốn sách này sé trinh bày thêm về thuộc tính của đối 
tượng cũng như cách truy cập các thuộc tính này. Các vấn đề cụ thể về đối tượng 


sẽ được trinh bày kỹ trong Chương 8. 


= ? 
Kiều mang 
Trong ví du trước, ban đã được giới thiệu cách tạo ra một đối tượng với tên 
riêng. Bạn cũng có thể sử dụng những đối tượng không có tên được truy xuất 
thông qua chỉ số. Đó là các mảng theo kiểu cũ, vốn quen thuộc trong rất nhiều 
ngôn ngữ lập trình. Bạn cũng vừa thấy nhiều đối tượng có thể được khai báo 
cùng lúc và đặt tên theo các ngôi sao. Đoạn mã sau tạo một mảng với phần tử là 
các đối tượng trên. Ví dụ này có trong file stararray.txt của phần Tài nguyên đính 
kèm. 


var star = new Array(); 
star[0] = "Polaris"; 
star[1] - "Deneb"; 
star[2] = "Vega"; 
star[3] = "Altair"; 


Ban cũng có thé sử dung cách khói ường minh như dưới đây: 


var star = ["Polaris", " fib 'Vega", "Altair"]; 


Máng có thể chứa giá trị lồng nhau, nhũ 
góp theo chòm sao mà nó xuất hiện: 
var star = [["Polaris", "Ursa Minor”],["Deneb”,"Cygnus" ], 


ong ví du sau của các ngôi sao được 


["Vega","Lyra"], ["Altair","Aquila"]]; 


Cuối cùng, mặc dù không phổ biến, ban có thể gọi hàm khởi tạo Array( ) với 
đối số là các phần tử mảng như sau: 


var star = new Array("Polaris", "Deneb", "Vega", "Altair"); 


Chú ý Việc goi hàm khởi tao Array() với đối số là một số nguyên sé thiết 


lập độ dài của mảng chứ không phải tạo ra một mảng có một phần tử với giá 
trị là đối số truyền vào. 


Đặc tả ECMA-262 mới phiên bản 5 có thêm một vài phương thức mới cho việc 
duyệt và làm việc với mảng. Kiến thức về mảng bao gồm các phương thức duyệt 
và làm việc với các phần tử sẽ được trình bày kĩ hơn trong Chương 8. 


Khai báo và su dung bién 


Dù sử dung ngôn ngữ nào lập trinh viên cũng cần làm quen với biến. Biến chứa 
những dữ liệu có thể thay đối trong suốt vòng đời của chương trình. Bạn đã thấy 
những ví dụ về khai báo biến trong các chương trước. Ở phần này, bạn sẽ chính 
thức tìm hiểu cách sử dụng biến trong JavaScript. 


Khai báo biến 

Trong JavaScript, biến được khai báo với từ khóa var. Bạn có thể tìm thấy các ví 
dụ về khai báo biến trong file variablenaming.txt của phần Tài nguyên đi kèm. 
Các cách khai báo biến như sau đều hợp lệ: 

var x; 


var myVar; 


var counter1; 


Tên của biến có thé chứa ky tự in ho Ong cũng như số, tuy nhiên chúng 
không được bát đầu bằng một chữ số. Tên biến không được chứa ky tự trắng 
hoặc các ký tự đặc biệt, ngoại trừ dấu gạch dưới (). (Mặc dù trên thực tế, tôi ít 
thấy ký tự trong biến JavaScript).Các tên biến sau là không hợp lệ: 


var  1stCounter; 
var new variable; 
var new.variable; 
var var; 


Trong các ví du trên, ba tên biến đầu không hợp lé vì chúng sử dung các ky tự 
không hợp lệ (hoặc là sử dụng ký tự hợp lệ ở sai vị trí, như trong ví dụ đầu tiên), 
còn tên biến cuối cùng, var, là không hợp lệ vì nó trùng với từ khóa. Để biết 
thêm thông tin về từ khóa trong JavaScript, đọc lại Chương 2, “Lập trình với 
JavaScript". 


Bạn có thể khai báo nhiều biến trên một dòng lệnh như sau: 
var X, y, zeta; 
Biến cũng có thể được khai báo và khói tao giá tri trên cùng một dòng: 


var x = 1, y = "hello", zeta = 14; 


"A. "^A 

Kiéu bién 

Các biến trong JavaScript không có kiểu rõ ràng. Bạn không cần khai báo trước 
một biến là số nguyên, số thực hay là chuỗi. Ban có thé thay đổi kiểu dữ liệu của 
biến đơn giản bằng cách gán một giá trị khác kiểu cho nó. Hãy xem ví dụ sau, 
biến x ban đầu chứa giá trị nguyên, nhưng sau đó được gán lại, nó thay đối để 
chứa giá trị kiểu chuỗi: 


var x= 4; 


< 
® 
¬ 
X 

| 


"Bây giờ nó là mộ 


- ? m A4 
Pham vi cua bién 
Pham vi của biến đề cập tới các vi trí mà trong đó giá trị của biến có thể được 
truy xuất. Biến có phạm vi toàn cục có thể được truy xuất ở bất kỳ đâu trong một 
chương trình. Trong ngữ cảnh một trang web — hoặc một tài liệu, bạn có thể truy 
xuất và sử dụng biến toàn cục ở bất cứ đâu. 


Biến được khai báo trong một hàm thì chỉ được sử dụng bên trong hàm đó. Điều 
này có nghĩa là giá trị của những biến này không thể được truy xuất bên ngoài 
hàm. Tham số của hàm có phạm vi ở bên trong hàm đó. 


Sau đây là một vài ví dụ thực tế về phạm vi của biến, bạn có thể tìm thấy chúng 
trong file scope1.txt của phần Tài nguyên đi kèm: 


«script type-"text/javascript'» 
var aNewVariable - "Bién toàn cuc"; 


function doSomething(incomingBits) { 


alert(aNewVariable); 
alert(incomingBits); 


j 


doSomething("Bién cuc bó"); 
</script> 


Đoạn mã trên định nghĩa hai biến: biến toàn cuc aNewVariable và bien cuc bộ 
incommingBits chỉ có pham vi bên trong hàm doSomething( ). Cả hai biến 
đều được truyền vào hàm alert( ). Khi hàm doSomething() được gọi, nội 
dung của cả hai biến được gửi thành công và hiển thị lên màn hình như trong 
Hình 4-2 và 4-3. 


Message from webpa... I—— 


A Biên toàn cuc 


— 4 


Hình 4-2 Bién. aNewVariable là biến toàn Cục. 


Message from webp... LI 


A Biến cục bộ 


| 


Hinh 4-3 Biến incommingBits có phạm vi bên trong hàm doSomething. 


Sau đây là một ví dụ phức tạp hơn. 


Kiém tra pham vi cüa bien 


1. Sử dung Visual Studio, Eclipse hoặc một trình soạn thảo khác sửa file 
scoping.htm trong thư mục mã nguồn mẫu Chương 4. 


2. Trong trang này, thay thế chú thích TODO bằng đoạn mã in đậm sau (đoạn 
mã này có thể được tìm thấy trong file scoping.txt của phần Tài nguyên đi 
kẻm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Ví dụ vé pham vi«c/title» 
«script type-"text/javascript'» 
var aNewVariable - "có pham vi toàn cuc."; 
function doSomething(incomingBits) { 
alert("Bién toàn cục bên trong hàm: " + a! 
alert(" bộ bên trong hàm: " + inc 
} 
</script> 
</head> 
<body> 


«script type="text/javascript"> 
doSomething(" có pham vi cuc bó trong hàm."); 


alert("Bién toàn cuc bên ngoài hàm: " + aNewVariable); 
alert("Bién cuc bó bên ngoài hàm: " + incomingBits); 
</script> 

</body> 

</html> 


Kết quả là ba hộp thoại trên màn hình. Hộp thoại thứ nhất: 


Microsoft Internet Explorer 


Hộp thoai thứ hai: 


Microsoft Internet Explorer 


Hộp thoai thứ ba: 


Microsoft Internet Explorer 


A Biến toàn cục bên ngoài hàm: có pham vi toàn cục. 


Bây giờ, bạn hãy doc kỹ lại đoạn mã. Ban thấy có bao nhiêu lời goi hàm 
alert( )? Gợi ý: Hai lời goi trong phần <head> và hai lời goi khác trong phần 
«body». Tổng cộng có bốn lần goi hàm alert ( ). Vậy tại sao chỉ có ba hộp 
thoại hiện lên màn hình? 


Bởi vi đây là phần nói về pham vi của biến (và tôi dà vừa gợi y), ban có thể tự 
suy luận ra câu trả lời. Ví dụ này cũng minh họa cho cách xử lý các vấn đề trong 
JavaScript khi kết quả không như những gì chúng ta muốn. 


Bước tiếp theo yêu cầu sử dụng add-on Firebug của trình duyệt Mozilla Firefox. 
Tôi tin rằng đến lúc này bạn đã cài đặt trình duyệt Firefox trên máy tính của 
mình (xem Chương 1, “Hiểu hơn về JavaScript” để biết vì sao nên cài đặt 
Firebug). Nếu máy tính của ban chua có Firefox, hãy tải về từ dia chỉ: 
http://www.mozilla.com/firefox/. 


Cài đặt Firebug 


Bước đầu tiên hướng dẫn bạn cách cài đặt Firebug trong Firefox. Mặc dù IE có 
trình gỡ lỗi riêng là Microsoft Script Debugger, Firebug vẫn là công cu manh mẽ 
và linh hoạt hơn. 


1. Sau khi cài Firefox, bạn có thể tiếp tục cài Firebug. Bắt đầu bằng việc vào 
trang http://www.getfirebug.com/. Khi trang web tải xong, nhãn vào liên kết cài 
đặt. (Nếu đây là lần đầu tiên cài đặt ạn có thể nhận được cảnh bảo rằng 
Eirefox chặn việc cài đặt phần mề o này không xuất hiện trong các 
phiên bản sau của Firefox). 


2. Sau khi nhấn vào liên kết cài đặt, mot Cua số cài đặt phần mềm được mở ra 
như sau. Nhấn vào Install Now. 


Software Installation 


i Install add-ons only from authors whom you trust. 


— Malicious software can damage your computer or violate your privacy. 


You have asked to install the following item: 


a Firebug (Author not verified) 
^. https://addons.mozilla.org/firefox/downloads/latest/1843/addon-1843-latest.xpi?src= 


P 


trình cài đặt hoàn tất khi ban khói c 
Firefox sau khi tái xong Firebug. 

| ML ci 
€^ $3 4 aboutaddons 


>Z 
| AK Add-ons Manager 


3 - firebug P | 
Name Last Updated Best match * 
Search: My Add-ons 
“ Search y 
«f Firebug will be installed after you restart Firefox. Restartnow Undo ¬ | 
Friday, December 09, 2011 = 
L- Get Add-ons P Firebug 1.8.4 - 3 
Web Development Evolved. More 
Extensions He 
Š Illuminations for Developers fo... 1.1.10 /«dnesday November 23, 2011 | 
Enhances Firebug to understand JavaScript libraries and frameworks, ..— More Install 


X Appearance 


lli Plugins 


Tuesday, February 01, 2011 


Install 


f>] CodeBurner for Firebug 1.6 


CodeBurner is a Firefox add-on that integrates with Firebug, to etend.. More 


4. Sau khi đóng và mở lai Firefox, các add-on mới cài đặt sé được hiển thị. Đóng 
hộp thoại Add-Ons lại. Chúc mừng! Firebug đã được cài đặt xong. Bạn có thể 


thấy biểu tượng nhỏ ở góc phải bên dưới cửa sổ trinh duyệt. Nhãn vào biểu 
tượng này để mở giao diện điều khiển Firebug: 


“ QU | Æ getfirebug.com 
i a? Firebug 
What is Firebug? Documentation Community Get Involved 
Introduction and Features FAQ and Wiki Discussion forums and tists Hack the code, create 
extensions 


em, 
4 


a 'ý| € Æ +* Console HTMLv | CSS Script DOM Net P 


«* | Edit | body#home - html Style ~ | Computed Layout DOM 
= body { master.css (line 26) ^ 
background: url("/img/bg-grad.jpg") repeat 
scroll 0 0 #EFEFEE; 
color: #333333; 
font-family: "trebuchet ms",helvetiíca,sans- 
serif; 
font-size: 62.59; 
} 
htal, body, div, span, reset.css (line 6) 
applet, object, iframe, hl, 
h2, h3, h4, h$, h$, p, 
blockquote, pre, à, abbr, 
acronym, address, bi it 


oc cách khởi động và sử dung nó ngay 
bật Firebug trong trang này hoặc 


5. Firebug đang bị tắt nhưng chúng ta sé 
sau đầy. Hãy thoải mái thử nghiệm 
tất cả các trang khác. 


Sau khi đã cài đặt Firebug, bạn có t ho vấn đề trong ví dụ về phạm vi 


của biến ở trên. 


Xử lý lỗi với Firebug 


1. Mở Firefox và chọn ví du scoping.htm đã được tạo ở phần đầu chương. Mã 
JavaScript thực thi và vẫn chỉ hiển thị ba hộp thoại thông báo như trước. Đóng 
tất cả các hộp thoại thông báo. Bạn sẽ thấy một trang trắng được tải lên Firefox. 


2. Nhãn vào biểu tượng ở góc dưới cùng bên phải của cửa sổ trình duyệt Firefox 
để mở Firebug. 


Ls 1E |= *| Console | HTML » | CSS Script DOM Net (2 Qaod 
z3 | Edit | body < html Style v | Computed Layout DOM 


r TYPI DTD HIMI vvi| This element has no style rules. You can create a rule for it. 
z <html> 
+ «head» 
* bod 
</html> 


3. Nhân vào tab Script để mở khung Script, chú ý là nó đã bị tắt. Bạn cần kích 
hoạt khung Console để nhận được tất cả các thông báo lỗi. Khung Script được 
kích hoạt khi khung Console đã được kích hoạt, vì vậy hãy kích hoạt khung 


ấn vào biểu tượng mũi tên/tam giác 
ỡ lỗi JavaScript được kích hoạt. 


Console. Nhân vào tab Console, tiếp t 
bên cạnh từ Console và nhấn Enab 


localhost/example/scoping.htr - * Google 


——-—— A— 
(.1 Vi dụ vē phạm vi ` E ¬ 


# (0| € d] -| Consote ~ | HTML CSS Script DOM Net 2 @£2(@32 
e| Clear Persist Profile In] Errors Warnings Info Debug Info 


"enabling j3evascript debugger to support console" 


4. Khi cả khung Console và Script đều được kích hoạt, nhấn vào nút Reload trên 
thanh công cụ chính của Firefox hoặc chọn Reload từ menu View. Trang được 
tải về và mã JavaScript sẽ thực thi lần nữa. Cả ba hộp thoại lại hiển thị, nhưng 
lưy ý là lúc này Firebug đã tìm ra một lỗi, biểu thị bằng chữ X màu đỏ và dấu 
hiệu Error ở góc phải của thanh trạng thái như minh họa trong hình bên dưới: 


FHrefOx v TIM 
® 


Ví dụ về phạm vi 


localhost. es 


1 


aui *| Console v | HTML CSS Script DOM Net p Qi, 


ie| Clear Persist Profile All | Errors Warnings Info Debug Info 
Q # incomingBits is not defined 


alert("Bién cuc bộ bên ngoái hàm: " + incomingBits); scoping.htm (line 20) 


5. Nếu khung Console không mở, nhấn vào tab Console trong Firebug để tìm lỗi, 
lỗi ở đây là do biến incommingBits chưa được khai báo. Cửa sổ này cũng chi 
ra dòng lệnh bị lỗi. Tuy nhiên hãy chú ý rằng do cách thức phân tích tài liệu nên 
số dòng trong mã nguồn của bạn có thể không chính xác. Dù vậy, bạn có thể 
thấy rằng biến incommingBits chư, hai báo trong khối <body> bởi vì 
pham vi của nó bị giới hạn trong h thing(). 


Phần này trinh bày cách sử dung Fi thời nói về sự khác nhau giữa 
biến toàn cục và biến cục bộ. Firebug ân không thé thiếu với trinh gỡ lỗi 
JavaScript. Vì vậy, hãy dành thời gian tìm hiểu xem Firebug, JavaScript, CSS và 
HTML tương tác với nhau ra sao. 


Cách gỡ lỗi trong ví dụ trên là khai báo lai biến incommingBits để khởi tạo nó 
bên ngoài lời gọi hàm. (Dòng lệnh thêm vào được viết như dưới đây. Bạn cũng 
có thể xem trong file scoping-fixed.htm trong thư mục Chương 4 của phần Tài 
nguyên đi kèm). Vì biến này được khai báo bên trong câu lệnh khai báo hàm nên 
nó không thể tồn tại bên ngoài phạm vi của hàm. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ví dụ vé pham vi«c/title» 
«script type-z"text/javascript'"» 
var aNewVariable - "có pham vi toàn cuc."; 
function doSomething(incomingBits) { 
alert("Bién toàn cuc bén trong hàm: 


alert("Bién cuc bó bên trong hàm: " - 


</script> 

</head> 

<body> 

<script type="text/javascript"> 
var incomingBits = "phái được định nghĩa nếu 
doSomething("có pham vi cuc bó trong hàm. ”); 
alert("Bién toàn cuc bên ngoài hàm " + aNewV 
alert("Bién cuc bộ bên ngoài hàm: " + incomi 

</script> 

</body> 

</html> 


Ban có thể tìm hiểu thêm về các hàm trong Chương 7 “Làm việc với hàm". 


ĐỐI tượng Date 

Đối tượng Date bao gồm rất nhiề 
ngày tháng. Trong cuốn sách này, t€ 
gặp thường xuyên trong quá trình làm Việc. 


c hữu ích để làm việc với dữ liệu 
ra một số ví dụ mà có thể bạn sé 


Một trong những nhược điểm của đối tượng Date trong JavaScript là các 
phương thức của Date được thực thi rất khác nhau tùy theo trình duyệt và hệ 
điều hành. Ví dụ, hãy xem xét đoạn mã trả về ngày hiện tại theo múi giờ địa 
phương và được định dang tự động bởi phương thức toLocaleDateString(): 


var myDate = new Date(); 
alert(myDate.toLocaleDateString()); 


Khi chạy trên trình duyệt IE8 với hé điều hành Windows 7, kết quả trả về thời 
gian như hiên thị trong Hình 4-4. 


Message from webpage 


A Saturday, June 16, 2001 


Hinh 4-4 Phuong thức toLocaleString() của đối tượng Date trong IE8. 


Hinh 4-5 hiển thi kết quả khi chay đoạn mã tương tu trên trình duyệt Firefox 3.6, 
hệ điều hành Linux. 


e The page at http://192.168.1.14 says: @ C 


A 06/16/2001 


Hình 4-5 Phuong thức toLocaleString() của dót tugng Date hiển thị kết quả khác khi chạy trên 
trình duyệt Firefox, hệ điều hành Linux. 


Cách hiển thị khác nhau của hai hộp thoại này có vẻ như không đáng bận tâm, 
nhưng nếu bạn muốn sử dụng các ngày trong tuần (Monday trong ví dụ trên) 
trong đoạn mã của mình thì mọi chuyện sẽ hoàn toàn khác. Đừng nghĩ rằng vấn 
đề này chi là do hệ điều hành khác nhau. Sự khác biệt của đối tượng Date và các 
phương thức của nó cũng tồn tai ở các trinh duyệt khác nhau trên cùng hệ điều 
hành Microsoft Windows. 


Phương thức getYear( ) của đối tượng Date cũng là một ví dụ cho thấy sự 
khác nhau trong thực thi JavaScript, lần này là trên hai máy chạy cùng phiên bản 
Windows 7. Xem xét đoạn mã sau: 


var myDate = new Date(); 
alert(myDate.getYear()); 


Khi gọi bằng IE8, đoạn mã này xuất ra kết quả nhu hiển thi trong Hình 4-6. 


Message from webp... mm 


d. 2010 


Hinh 4-6 Két quả trả về của phương thức getYear() trong IE8 hiển thị năm đầy đủ. 


Khi chạy trên Firefox 3.6 cũng trên một máy chạy Windows, đoạn mã trên xuất 
ra kết quả hiển thị như Hình 4-7. 


The page at http://192.168.1.14 says: 


À 110 


Hinh 4-7 Kết quả trả về phuong thức ge 


efox hiển thị năm tính từ mốc 1900. 


Phiên bản Firefox trả về 110 (2010 ăm bắt đầu từ mốc 1900. Kết quả 
nào đúng hơn? Phiên bản Firefox trả uả đúng theo đặc tả ECMA-262 về 
phương thức getYear( ): “Trả về năm hiện tại - 1900". 


Rất may là chúng ta có một cách đơn giản để giải quyết sự khác biệt này. Đặc tả 
ECMA-262 cung cấp phuong thức getFullYear (), trả về năm đầy đủ (2010) 
như trong ví dụ đã đưa. 


Cách duy nhất để giải quyết triệt để vấn đề kết quả khác nhau thực thi ứng dụng 
JavaScript là tiến hành kiểm thử trên các trình duyệt và các nền tảng khác nhau. 
Cách này sẽ kéo dài thời gian phát triển ứng dụng, tuy nhiên việc tìm và sửa lỗi 
trong quá trinh phát triển chắc chắn có chi phí thấp hơn nhiều so với việc sửa lỗi 
sau khi người sử dụng phát hiện ra chúng. 


Ngày nào? 


Chú ý đến thời gian trong Hình 4-4 và 4-5: Saturday, June 16, 2001. Bạn có 


thể tự hỏi liệu có phải cuốn sách này được viết từ năm 2001. Không phải 
vậy. Chỉ đơn giản là việc dùng một năm đã qua sẽ giúp minh họa cho vấn đề 


về dữ liệu thời gian trong JavaScript. Các hàm JavaScript trả về thời gian 
được thiết lập cho máy tính đang chạy đoạn mã JavaScript đó. 


Để chứng minh điều này, tôi đã thay đổi thời gian trong máy tôi thành 16 
tháng 6 năm 2001. Khi bạn sử dụng bất cứ phương thức nào của đối tượng 


Date, hãy nhớ rằng nó luôn phán ánh thời gian trên máy của người dùng. 


Đối tượng Date có thể xử lý từ 0 tới 7 đối số. Nếu khi khởi tạo, đối tượng Date 
được truyền vào một đối số dạng chuỗi, chuỗi này chứa dữ liệu thời gian. Khi 
đối số truyền vào có dạng số, đối số này được giả định là ngày theo mili giây 
tính từ mốc 1/1/1970 và khi cả bảy đối số được truyền vào, chúng sẽ có dạng 
như sau: 


new Date(năm, tháng, ngày, giờ, phút, giây, mili giây) 


Chú ý Chỉ bắt buộc truyền đối số năm và tháng, còn lại là không bắt buộc. 


Hãy nhớ những điều sau khi sử dụ 


4 Năm nên gồm 4 chữ số trừ trường hop bạn ấn định một năm nằm trong 
khoảng từ năm 1900 tới năm 2000, khi đó bạn chỉ cần truyền số gồm hai 
chữ số từ 0 tới 99, chúng sẽ được cộng thêm 1900. Vì vậy, 2008 tương ứng 
với năm 2008, còn 98 thì là 1998. 


» Tháng là số nguyên từ 0 tới 11, với 0 là tháng một và 11 là tháng mười hai. 

» Ngày là một số nguyên từ 1 tới 31. 

» Giờ là số nguyên từ 0 tới 23, 23 là 11PM. 

» Phút và giây đều là số nguyên từ 0 tới 59. 

» Mili giây là số nguyên từ 0 tới 999. 
Ví dụ tiếp theo trình bày cách hiển thị ngày giờ trên trang web - một thao tác rất 
phổ biến trong lập trình. 


Hiển thi ngày và giờ trên trang web 


1. Sử dụng Visual Studio, Eclipse hoặc một trình soạn thảo khác chỉnh sửa file 


writingthedate.htm trong thư muc mã nguồn mẫu của Chương 4. 
2. Trong trang này, thêm đoạn mã in đậm dưới đầy: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Đối tuong date</title> 

</head> 

<body> 

«p id-"dateField"»& </p> 

«script type-"text/javascript'» 

var myDate - new Date(); 


var dateString = myDate.toLocaleDateString() + " " + myDat 
var dateLoc = document.getElementById("dateField"); 
dateLoc.innerHTML = "Xin chào - Trang web duoc tái lúc" + 
</script> 

</body> 

</html> 


3. Đóng và dùng trình duyệt mở li 
dưới (ngày hiển thị có thể sẽ kh 


D, bạn sẽ thấy một trang như hình 


|  ¡ EI lai 


|g http://localhost/Cor O ~ > X | (B Đối tượng date ls] 


Xin chào — Trang web được tài lúc Wednesday, November 09, 2011 11:35:58 PM 


Mã JavaScript của trang web: 


var myDate = new Date(); 

var dateString = myDate.toLocaleDateString()+” “+myDate.toLo: 
var dateLoc = document.getElementById("dateField"); 
dateLoc.innerHTML = "Xin chào - Trang web duoc tái lúc " + di 


Mã JavaScript dùng trên đối tượng Date thường khá don giản. Sử dung hai 


phương thức toLocaleDateString() và toLocalTimeString()dé trả về 
ngày và giờ địa phương. Hai phương thức này được nối với nhau bằng một dấu 
cách và gán vào biến dateString như sau: 


var dateString = myDate.toLocaleDateString() + " ” + myDate. 


Câu lệnh tiếp theo ghi nội dung của biến dateString ra trang web. Chương 10 


“Mô hinh đối tượng tài liệu” sé trình bày chi tiết hơn về vấn đề này. 


Đếm ngược đến một ngày cụ thể trong tương lai 


1. Sử dụng Visual Studio, Eclipse hoặc một trình soạn thảo khác chỉnh sửa file 
countdown.htm trong thư mục mã nguồn mẫu của Chương 4. 


2. Thêm đoạn mã in đậm dưới đây: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 

«head» 

«title» Đối tượng date< itle? 

</head> 

<body> 

<p id="dateField"> </p> 

«script type="text/javascript"> 

var today = new Date(); 

var then = new Date(); 

// Thiét lâp ngày là 1/1/2012 
then.setFullYear(2012,0,1); 

var diff - then.getTime() - today.getTime(); 

diff - Math.floor(diff / (1000 * 60 * 60 * 24)); 
var dateLoc = document.getElementById("dateField"); 


dateLoc.innerHTML = "Còn " + diff + 
" ngày cho đến ngày 1/1/2012"; 
</script> 

</body> 

</html> 


3. Luu và dùng trình duyệt mở lai trang web. Tùy theo thời gian được thiết lập 
trên máy tính của bạn, số ngày được hiên thi sẽ khác, nhưng nhìn chung, 
trang sẽ hiển thị như sau: 


PN" 


| 
| Æ] http.//localhost/ex O ~ > X | (& Đối tượng date | | 


Còn 551 ngày cho đến 1/1/2012 


Mách nhỏ Hãy cẩn thận khi sử dụng ngày tháng trong JavaScript vì bất kỳ 
mục đích nào khác ngoài hiển thị chúng. Vì ngày tháng phụ thuộc vào thời 
gian được thiết lập trên máy của người dùng nên hãy tránh sử dụng nó khi 

cần tính thời gian chính xác, chăng hạn trong những hệ thống đặt hàng. 


Ví dụ bạn vừa sử dụng thêm một sc lối tượng Math và Date, là 
floor() và getTime ( ). Mặc dù í ày bao quát khá nhiều vấn đề về 
JavaScript, nó vẫn không phải là tài li khảo đầy đủ về ngôn ngữ này. Hãy 
tham khảo chuẩn ECMA-262 tại http://www.ecma- 
international.org/publications/standards/Ecma-262.htm để biết thêm thông tin. 


Phần tiếp theo sẽ hướng dẫn bạn cách tính toán (hoặc ước tính) thời gian một 
trang web cần để tải lên trình duyệt của người dùng. 


Chú ý Tính toán này có thể không chính xác vì nó không bao gồm thời gian 


cần thiết để tải những thành phần không phải văn bản như hình ảnh hoặc các 
thành phần đa phương tiện khác. 


Tính toán thời gian tải trang web 


1. Sử dụng Visual Studio, Eclipse hoặc một trình soạn thảo khác chỉnh sửa file 
render.htm trong thư mục mã mẫu của Chương 4, phần Tài nguyên đi kèm. 


2. Thêm đoạn mã in đậm dưới đây: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional, 
"http://www.w3.org/TR/xhtm11/DTD/xhtmli-transitional.dtd": 
«html» 


«head» 
<t1tle>Date</title> 
«script type="”text/Javascript”> 
var started = new Date(); 
var now - started.getTime(); 
</script> 
</head> 
<body> 
<p id="dateField"> </p> 
<script type="text/javascript"> 
var bottom = new Date(); 
var diff = (bottom.getTime() - now)/1000; 
var finaltime = diff.toPrecision(5); 
var dateLoc = document.getElementById("dateField"' 
dateLoc.innerHTML = "Trang được tái trong " + finaltime + 
</script> 
</body> 
</html> 


3. Luu và dùng trinh duyét mó lai tr y thuộc vào tốc độ của máy tính, tốc 
độ của web server và kết nối mạng mà bạn có thể tải về một trang web chỉ 
sau 0 giây như dưới đây: 


Zl Date - Microsoft Internet Explorer 


Fie Edt Wew Favorites Tools Hel 


0--0 DA @ 2= kee Oe- E- JONS 


http: /Aocalhost/Code /Chaptero4/render htm 


ao: SE oeoo ne o - 


Trang được tài trong 0.0000 giày 


1. Nếu kết quả của bạn cũng như trên, ban có thé tạo độ trễ cho trang đó để thử 
lại. (Tuy nhiên, trên thực tế sẽ không ai làm như vậy vì không ai muốn làm 
chậm trang web của mình! Tất nhiên, việc tạo độ trễ rất tiện lợi khi tiến hành 


kiểm thử trang web). Sử dụng vòng lặp for là cách đơn gián và nhanh chóng 


nhất để làm điều này: 


for (var i = 0; i < 1000000; i++) { 
//khi vòng lặp chạy sẽ tạo độ trễ 


) 


Giá trị 1000000 là tùy ý. Bạn có thể chọn một giá trị lớn hoặc bé hơn để tạo độ 
trễ mong muốn. Đoạn mã cuối cùng sẽ như sau: 


«!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
"http://www.w3.org/TR/xhtm11/DTD/xhtmli-tran 
«html xmlns-z"http://www.w3.0rg/1999/xhtml"» 


«head» 


«/head» 
«body» 


</body> 
«/html» 


«title»Datec/title» 

«script type-"text/javascript"» 

var started - new Date(); 

var now - started.getTime(); 

for ( = 0; 1 < 1000000; i++) { 
g lặp chay sẽ tạo độ trễ 


«p id-"dateField"» </p> 

«script type-"text/javascript"» 

var bottom - new Date(); 

var diff = (bottom.getTime()-now)/10 
var finaltime - diff.toPrecision(5); 
var dateLoc = document.getElementByI: 
dateLoc.innerHTML = "Trang duoc tái 
</script> 


1. Lưu và mở lại bằng trình duyệt. Ban sẽ thấy giá trị hiên thị là số dương. 


3 Date - Microsoft Internet Explorer 
Fée Edt View  Favontes Tools Help 


Qv lá : & ? Search S £ Favorites €? đ3- a í 5 m [SY el E 
http://ocalhost/Code /Chapter04/Fender.htm 


tao - Eu E DERE n [ETE 


Trang được tài trong 0.42200 giây 


#ì http://www.hp.com/go/yahooUS 


Trên thực tế, để tính toán chính xác thói gian tái về một trang, hãy đặt một biến ở 
đầu trang và một biến ở gần cuối trang. 


Chú ý là phương thức now( ) của đối tượng Date cũng có thể được dùng để thay 
thế cho getTime(). 


Bạn vừa học một vài phương thức trong 
tượng Date. Nhiều phương thức troi 
(Coordinated Universal Time), ng 
và giờ UTC hơn là giờ dia phương iet kê các phương thức của đối 
tượng Date. Ngoại trừ getTime() Và imezoneOffset ( ), tất cả các 
phương thức sử dụng giờ UTC được đặt tên theo dinh dang nhu getUTCDate( ) 
hoặc getUTCDay( ). 


hoảng hơn 40 phương thức của đối 
sử dụng phiên bản giờ UTC 
ưu tiên thiết lập và khởi tạo ngày 


BẢNG 4-4 Các phương thức get của đối tượng Date 


Phương thức Mô tả 


getDate() Trà vé ngày trong tháng 

getDay() Trá vé ngày trong tuán 

getFullYear() Trà vé năm có 4 chữ số, được khuyến khích dùng trong hầu hết các trường hợp 
getHours() Trả vé giờ của đối tượng date 

getMiliseconds() Trả về mili giày của đối tượng date 

getMinutes() Trả về phút của đối tượng date 

getSecondsQ Trả về giây của đối tượng date 


|gefTime(@[Trả về mili giây kể từ móc 1/1/1970| 


|getTimezoneOffset()[Trả về chênh lệch (theo phút) giữa giờ UTC và giờ địa 


phương| 


Hầu hết các phương thức get...( ) đều có phương thức sef. .. ( ) tương ứng, 
như trong Bảng 4-5. Cũng như get, hầu hết các phương thức set£... () sử dung 
giờ UTC, trừ setT1me ( ). 


BÁNG 4-5 Các phương thức set của đối tượng Date. 


Phương thức Mô tả 
setDate() Thiết lập ngày trong tháng của một đối tượng date. 
Thiết lập năm (định dạng 4 ký tự) cho đối tượng date. Chấp nhận cả các số nguyên 


SẾ HH HH HỤU tháng và ngày trong tháng. 

setHours() Thiết lập giờ cho một đối tượng date. 
setMiliseconds() Thiết lập mili giây cho đối tượng date. 

setMinutes() Thiết lập phút cho đối tượng date. 

setMonth() Thiết lập tháng là một số nguyên cho đối tượng date. 
setSeconds() Thiết lập giây cho đối tượng date. 


setTime() Thiết lập thời gian tính bằng mili giây kể từ 1/1/1970. 


Có nhiều phương thức chuyển đổi 
dạng khác nhau. Bạn cũng đã thực Õõ phương thức nhu 
toLocaleDateString(). Các ph tương tự khác bao gồm 
toLocaleString(),toGMTString(), toLocaleT1meStr1ng(), 
toString(), toTS0Str1ing(), toDateString(), toUTCString(), và 
toTimeString(). Hãy thoải mái thực hành với chúng, chi lưu ý là 
toTS0String() là một phương thức mới trong đặc tà ECMA-262 phiên bản 5 
và một vài trình duyệt có thé chưa hỗ trợ (hầu hết các phiên bán IE đều chưa hỗ 
trợ). Ví dụ đơn giản sau giúp bạn bắt đầu quá trình thử nghiệm các hàm này. Hãy 
nhập chúng vào thanh địa chỉ trên trình duyệt: 


ate sang dạng chuỗi ở nhiều định 


javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 
javascript:var myDate 


new Date() 
new Date() 
new Date() 


; alert(myDate.toL: 
; alert(myDate.toL: 
; alert(myDate.toGl 
new Date(); alert(myDate.toL: 
new Date(); alert(myDate.toS 
new Date(); alert(myDate.to. 
new Date(); alert(myDate. toD: 
new Date(); alert(myDate.toU 
new Date(); alert(myDate.toT 


Bạn có thé viết đoạn mã này mà không cần tao biến myDate như sau: 


javascript: alert(new Date().toUTCString()); 


Sử dụng đổi tượng RegExp 


Biểu thức chính quy là các cú pháp bạn sử dụng để so khớp và thao tác trên các 
chuỗi. Nếu bạn từng làm việc với giao diện dòng lệnh trong Microsoft Windows 
hoặc Linux/Unix, bạn có thể đã quen với cách tìm kiếm các file bằng cách so tên 
với một dấu hoa thị, hoặc sao (*), như sau: 


dir *,* 
hoác: 
dir *.txt 


Nếu như ban từng làm việc với ky t 
thuộc với biểu thức chính quy. Trê 
trong biểu thức chính quy. 


&n nhu hay ? thi bạn sẽ thấy quen 
iu và ? cũng là các kí tự được dùng 


JavaScript cung cấp công cụ rất manh dé làm việc với chuỗi ky tự và các chữ số 
thông qua việc sử dụng đối tượng RegExp và các ký tự đại diện trong biểu thức 
chính quy. Phiên bản trình phân tích biểu thức chính quy theo chuẩn ECMA-262 
chủ yếu vay mượn từ trình phân tích biểu thức chính quy của Perl 5. Ví dụ sau là 
biểu thức chính quy để so khớp từ JavaScript: 


var myRegex = /JavaScript/; 

Biểu thức chính quy ở trên so khớp chuỗi JavaScript ở bất ky chó nào mà nó 
xuất hiện. Ví dụ, nó sẽ khớp trong câu “Đây là sách về JavaScript” và chuỗi 
“DaylasachveJavaScript” nhưng sẽ không khớp với “Đây là sách về javascript”, 
vì biểu thức chính quy có phân biệt chữ hoa và chữ thường. (Bạn sẽ học cách 
thay đổi điều này ở cuối chương). 


Cú pháp của biểu thức chính quy 


Các biểu thức chính quy trong JavaScript thường được rút gọn và có cú pháp 


khó hiểu. Tuy nhiên, ban không phải lo ngại về chuyện này vì đó thực chất là thế 
mạnh của biểu thức chính quy. Ví dụ, biểu thức chính quy sau tìm các chữ số và 
sau đó định dạng lại thành khối địa chỉ IP (Internet Protocol) ở dạng 
192.168.0/24 bằng cách gom nhóm. Đây không phải là một ví dụ phức tap về 
biểu thức chính quy. (Nó là một phần của đoạn mã Perl được dùng để phân tích 
danh sách mạng trong tường lửa của Trung tâm Thông tin Mạng châu Á Thái 
Bình Dương- APNIC). 


s⁄([8-9]+)\.([9-9]+)(Ý⁄[9-9]+)⁄$1V.$2\.0$3/; 


Biểu thức chính quy tương tự có thể được viết trong JavaScript bằng cách sử 
dụng hàm replace của đối tượng string, như sau: 


var theIP = "192.168.0/28'"; 
alert(theIP.replace(/([0-9]-)S.([0-9]7-) (N/[0-9]4)/, "$1N . $2N .! 


Cú pháp của biểu thức chính quy bao gồm rất nhiều ký tự có ý nghĩa đặc biệt, 
bao gồm cả các ký tự đánh dấu so khớp để bắt đầu hoặc kết thúc một chuỗi, ký 
tự đại diện, ký tự nhóm và một số ký tự khác. Bảng 4-6 trình bày các ký tự này. 


BẢNG 4-6 Những ký tự đặc biệt p 
JavaScript. 


ø biểu thức chính quy của 


Kýtự Miêu tả 


" So khớp với bất ky chuỗi nào bát đầu bằng chuỗi đó. Ví du ^n: Bất kỳ chuỗi nào bát đầu bằng 


ký tự n. 

\$ So khớp với bát kỳ chuỗi nào kết thúc bằng chuỗi đó. Ví du n\$: Bất ky chuỗi nào kết thúc bằng 
ký tự n. 
Khớp với bất kỳ ký tự nào. 

T Khóp với ky tự trước nó 0 hoặc nhiều lần. Đây là một ky tự dai diện. 

+ Khớp với ký tự trước nó 1 hoặc nhiều lần. 

? Khóp với ky tự trước nó 0 hoặc một lần. 

() Nhóm các ký tự khớp vào trong cặp dấu ngoặc đơn để sử dụng sau. 


{n} Khớp với ký tự trước nó ít nhất n lần. 
(niam)  Khóp với ký tự trước nó ít nhất n lần nhưng không quá m lần. 


[] Định nghĩa một tập ký tự để tiến hành so khớp với bất kỳ ky tự nào nằm trong tập này. Ky tự 
này có thể sử dụng dải như 0-9 để so khớp các chữ số hoặc a-z để so khớp các ký tự. 

[^] Việc sử dụng dấu ^ trong một tập ký tự sẽ phủ định tập ký tự đó, nghĩa là các ký tự bên trong tập 

không thể xuất hiện trong chuỗi so khớp. 


Được sử dung như một ký tự thoát, nghĩa là những gi theo sau dấu gạch chéo ngược được coi là 


một ky tự thông thường thay vi có ý nghĩa đặc biệt. Dấu cũng có thé được sử dung để khai báo 
các bộ ký tự đặc biệt, được liệt kê trong Bảng 4-7. 


Ngoài ký tự đặc biệt, còn nhiều chuỗi ký tự được dùng để so khớp với các nhóm 
ký tự hoặc các ký tự không phải chữ số. Một số chuỗi ký tự như vậy được trình 
bày trong Bảng 4-7. 


BẢNG 4-7 Những ký tự đặc biệt phổ biến trong biểu thức chính quy của 
JavaScript| 


n Chuỗi so khớp 


Tim và so khớp chuỗi nằm sau ký tự b với những ký tự ở vi trí bắt đầu và kết thúc của một từ. Ví 


b du: bW3 sé khóp vói chuói W3 trong tir W3School. 

B Tim và so khớp chuỗi nằm sau ký tu B với những ky tự không nằm ở vị trí bắt đầu và kết thúc của 
một từ. Ví dụ: chuỗi School trong từ W3School sé so khớp với biểu thức chính quy BSchool 

C Ky tu Control khi sử dung kết hợp với ky tự khác. Ví dụ:cA là ký tự thoát cho Control-A. 

d Chữ số 

D Không phải là chữ số. 

n Xuống dòng. 


Về đầu dòng. 
Ký tự khoảng trắng (dấu cách hoặc tab 
Một ký tự không phải là khoảng trắng. 
t Dấu tab 

w Ký tự chữ hoặc số 

W_. Ký tự không phải là chữ hay số. 


Ngoài các ky tự trong Bảng 4-7, bạn có thể sử dung ký tự i để quy định biểu 
thức chính quy không phân biệt chữ hoa chữ thường và g để xác định nó sẽ tiếp 
tục so khớp sau khi tìm thấy kết quả trùng khớp đầu tiên. 


Đối tượng RegExp có các phương thức riêng, bao gồm exec và test, phương 
thức test kiểm tra một biếu thức chính quy trên một chuỗi và trả về kết quả 
true (đúng) hay fa1se (sai) dựa trên kết quả so khớp biểu thức chính quy với 
chuỗi đó. Tuy nhiên, cách phổ biến khi làm việc với các biểu thức chính quy là 
sử dung các hàm quen thuộc của kiểu dữ liệu chuỗi nhu match, search, 
replace. 


Phuong thức exec( ) của đối tượng RegExp được sử dung để phân tích biểu 
thức chính quy trên một chuỗi và trả về kết quả. Ví dụ sau phân tích một URL 


đơn gián và trích xuất ra tên miền: 


var myString = "http://www.braingia.org"; 
var myRegex = /http:N/N/Nw*N.(.*)7; 

var results - myRegex.exec(myString); 
alert(results[1]); 


Kết quả của đoạn mã này là hộp thoại hiển thi tên miền, như trong Hinh 4-8. 


Message from webp... =—— | 


ÂA braingia.org 
| 


J 
Hinh 4-8 Phân tích URL sử dụng biểu thức chính quy. 


Hãy phân tích tuần tự từng dòng m bạn có một khai báo chuỗi: 


var myString = "http://w la.org"; 


Sau đó là khai báo một biểu thức chính quy và gọi hàm exec( ), kết quả phân 
tích chứa trong biến results. 


var myRegex 
var results 


/http:N/N/Nw*tN.(.*)7; 
myRegex.exec(myString); 


Biểu thức chính quy trên chứa một số thành phần quan trọng. Nó bát đầu bằng 
chuỗi http:, thêm hai dấu gạch chéo, nhưng vì dấu gạch chéo (/) là ky tự đặc biệt 
trong biểu thức chính quy, bạn phải thoát chúng bằng cách sử dụng dấu gạch 
chéo ngược (), tao thành http: / /. 


Phần tiếp theo của biểu thức chính quy, Ww, dùng để tìm kiếm bất ky ký tự chữ 
hoặc số nào. Địa chỉ web thông thường chứa www, vì vậy đừng nhầm lẫn rằng w 
di tìm 3 ký tự w. Host (noi lưu trữ website) trong ví dụ này có thể có tên là web, 
host1, myhost, hoặc www, như chuỗi trong đoạn mã bạn đang xem. Vì \w so 
khớp với một ký tự và host thường có tới 3 ký tự (www), nên biểu thức chính 
quy có thêm một ký tự đặc biệt + để chỉ ra rằng biểu thức chính quy phải tìm ký 
tự chữ số ít nhất một lần. Bây giờ đoạn mã là http: \/\/w+ sẽ so khớp với dia chi 


tên miền http://www 


Bây giờ cần tính đến dấu chấm giữa tên host (www) và tên miền 
(braingia.org). Bạn sẽ hoàn thiện bằng cách thêm một dấu chấm (. ), nhung 
vì dấu chấm cũng là một ký tự đặc biệt, bạn cần dùng ký tự thoát \. Vậy là 
chúng ta có http: \⁄\⁄w+Y.„ có thể so khớp với tất cả các thành phần của một 
địa chỉ tên miền thông thường. 


Cuối cùng, bạn cần giữ lại tên miền để sử dụng sau này, vì vậy hãy đặt tên miền 
vào trong dẫu ngoặc đơn. Vì bạn không cần quan tâm tới tên miền là gi hoặc cái 
øì xuất hiện sau nó, hãy sử dụng thêm hai ký tự đặc biệt: dấu chấm để so khớp 
bất kỳ ký tự nào và dấu hoa thị để so khớp một hoặc tất cả các ký tự trước nó. 
Bạn đã có biểu thức chính quy cuối cùng, được sử dung trong hàm exec ( ). Kết 
quả được lưu vào biến results. 


Nếu tìm được chuỗi so khớp, kết quả trả về từ hàm exec( ) sẽ là một mảng chứa 
toàn bộ chuỗi này và chỉ số cho từng phần so khớp của biếu thức. Chỉ số thứ hai 
(1) được truyền vào hộp thoại thông báo, như hiển thị trong Hình 4-8. 


alert(results[1]); 


Ví dụ này đã khá đầy đủ, song bié quy này còn có thể được cải tiến 
hơn bằng cách thêm những ký tự khác ánh dấu so khớp và để đại diện cho 
những ký tự sau tên miền cũng như những ký tự không phải chữ hay số trong 
phần tên host. Tuy nhiên, để ví dụ đơn giản hơn chúng ta nên dùng phương thức 
so khớp ít nghiêm ngặt hon. 


Kiểu đối tượng chuỗi chứa ba phương thức để so khớp và làm việc với các 
chuỗi, và chúng sử dụng biểu thức chính quy để làm điều này. Tất cả các phương 
thức match, replace và search đều sử dung mẫu biểu thức chính quy để so 
khớp. Vì bạn vừa được học về biểu thức chính quy, nên đây là thời điểm thích 
hợp để giới thiệu những phương thức này. 


Phương thức match trả về một mảng với thông tin tương tự như hàm exec của 
kiểu RegExp. Đây là một ví dụ: 


var emailAddr = "suehringQbraingia.com"; 
var myRegex = /N.com/; 

var checkMatch - emailAddr.match(myRegex); 
alert(checkMatch[0]); //Két quà trá vé.com 


Ban có thể cải tiến đoạn mã trên sử dung trong một biểu thức điều kiện để xác 
định địa chỉ email có chứa chuỗi . com hay không: 


var emailAddr =  "suehr1ng8bra1ng1a.com”; 

var myRegex = /N.com/; 

var checkMatch = JemailAddr.match(myRegex); 
if (checkMatch !-- null) 


alert(checkMatch[0]); //Két quà trá vé.com 
} 


Phuong thức search làm việc tương tự như hàm match nhung chỉ trả vê chỉ sõ 
(vi trí) của kết quả so khớp đầu tiên như sau: 


var emailAddr =  ”"suehr1ng@bra1ng1a.com”; 

var myRegex = /N.com/; 

var searchResult = emailAddr.search(myRegex); 
alert(searchResult); //Két quả trả về 17 


Nếu chuỗi không khớp với biểu thức chính quy, hàm search trả về - 1. 


Phương thức replace thay thế mộ 
được tìm thấy. Giả sử như trong ví 
chỉ .com thành .net, bạn có thể sử d 


ag chuỗi khác nếu một so khớp 
i email, bạn muốn thay đổi địa 
eplace nhu sau: 


var emailAddr - "suehringQbraingia.com"; 
var myRegex - /N.com$/; 
var replaceWith - ".net"; 


var result - emailAddr.replace(myRegex,replaceWith); 
alert(result); //Két quả trả vé suehring@braing1a.net 


Nếu không tim thấy chuỗi con so khớp, chuỗi gốc sẽ được truyền vào biến 
result; ngược lại, chuỗi mới sau khi thay thế sẽ được trả vê. 


Chú ý Bạn có thể sử dụng nhiều ký tự đặc biệt để thực hiện thay thế. Vui 


lòng xem đặc tả ECMA-262 để có thêm thông tin về các ký tự này. 


Các chương sau trình bày nhiều ví dụ về các phương thức liên quan tới biểu thức 
chính quy của kiểu chuỗi. Bạn có thể sử dụng chương này để tham khảo cách 
dùng các ký tự đặc biệt trong biểu thức chính quy. 


Tham chiếu và don dep bó nhớ 


Một số biến hoặc giá tri của chúng là kiểu dữ liệu cơ sở, trong khi một số khác là 
các kiểu dữ liệu tham chiếu. Ban đầu bạn có thể không để tâm tới điều này. 
Nhưng mọi chuyện sẽ thay đổi ngay khi bạn bắt gặp một hành vi lạ với biến vừa 
được sao chép. 


Có thể giải thích như sau: các đối tượng, mảng và hàm là kiểu tham chiếu, còn 
kiểu số, logic, null và undefined là kiểu tham trị. Theo đặc tà ECMA-262, còn 
có các kiểu dữ liệu cơ bản khác là kiểu số và kiểu chuỗi, nhưng kiểu chuỗi 
không nằm trong pham vi thảo luận này. 


Khi một số được sao chép, bạn mong đợi số sao chép và số gốc có cùng giá tri. 
Tuy nhiên, nếu bạn thay đổi biến gốc, biến sao chép sẽ không bị ảnh hưởng. Đây 
là một ví dụ: 


// Gán cho bién myNum giá trị là 20. 
var myNum = 20; 

// Tao mót bién khác, anoth 
// Bây giờ, cả anotherNum 
var anotherNum = myNum; 
// Thay đổi giá tri của m 
myNum = 1000; 

// Hiển thi nội dung của cả 2 bién 

// Chú ý là nói dung của bién anotherNum chua được thay đổi 
alert(myNum); 

alert(anotherNum); 


và sao chép nội dung của b. 
đều là 20 


1000. 


Hộp thoai thông báo sẽ hiển thi tương ứng là 1000 và 20. Sau khi biến 
anotherNum sao chép giá tri từ biến myNum, nó sẽ giữ mãi giá tri này mà không 
bị ảnh hưởng bởi những thay đổi của biến myNum sau đó. Lý do là vì kiểu số là 
kiểu dữ liệu cơ bản trong JavaScript. 


Xem xét một ví dụ đối nghịch trên biến kiểu tham chiếu như sau: 


// Tạo một mảng với 3 phần tử số tên là myNumbers 


var myNumbers = [20, 21, 22]; 
// Tao mót bán sao chép mói cüa myNumbers là mót bién tén co 
var copyNumbers - myNumbers; 


// Thay đổi giá tri đầu tiên của myNumbers thành 1000. 
myNumbers[0] = 1000; 


// hóp thoai thóng báo 
alert(myNumbers); 
alert(copyNumbers); 


Lần này, vi mảng là kiểu tham chiếu, cả hai hộp thoại cảnh báo hiển thi 
1000,21,22, mặc dù chi có biến myNumber s bị thay đổi truc tiếp trong đoạn mã. 
Bài học rút ra là phải ghi nhớ rằng các biến đối tượng, mảng và hàm là thuộc loại 
tham chiếu, do đó bất ky sự thay đổi nào của biến gốc cũng làm thay đổi các 
biến sao chép. 


Một vấn đề khác cũng liên quan đến sự khác nhau giữa kiểu dữ liệu cơ bản và 
kiểu dữ liệu tham chiếu là việc dọn dẹp bộ nhớ. Dọn dẹp bộ nhớ (garbage 
collection) ám chỉ việc hủy các biến không sử dụng của trình thông dịch 
JavaScript để tiết kiệm bộ nhớ. Khi một biến không còn được sử dụng trong 
chương trình, trình thông dịch giải phóng bộ nhớ để tái sử dụng. Điều tương tự 
cũng diễn ra trong Java Virtual Machine hoặc .NET Common Language 
Runtime. 


Việc tự động giải phóng bộ nhớ tron 
khác như C++ sử dụng. Trong các 
dọn dẹp bộ nhớ thủ công. Đây là t 


cript khác với cách mà các ngón ngữ 
5, lập trình viên phải thực thi việc 
øì bạn cần biết về dọn dẹp bộ nhớ. 


Tìm hiểu các loại chuyển đổi kiểu 
dữ liệu 


Trước khi khép lại phần thảo luận về biến và kiểu dữ liệu, bạn cũng nên biết một 
chút về chuyển đối kiểu dữ liệu. JavaScript thường thực thi ngầm việc chuyển 
đối kiểu cho ban, tuy nhiên trong nhiều trường hợp, ban nên dùng cách ép kiểu 
hay chuyển đổi tường minh. 


Chuyển đối kiểu số 

Bạn đã thấy việc chuyển đổi hai định dạng số, từ hệ thập lục phân về hệ thập 
phân, trong ví dụ ở phần “Kiểu dữ liệu trong JavaScript” ở phần đầu của 
chương. Bạn cũng có thể chuyển đổi số thành chuỗi theo cách tương tự. 
JavaScript chuyển đổi ngầm một số sang chuỗi khi số đó được sử dụng trong 


ngữ cánh một chuỗi. 


Dé chuyển đổi tường minh một số thành chuỗi, ép kiểu nó thành một chuỗi, nhu 
trong ví dụ sau: 


// Chuyển đổi myNumString sang một chuỗi với giá tri 100 
var myNumString = String(100); 


Chuyển đối kiểu chuói 

Tương tự như cách chuyển số thành chuỗi, bạn cũng có thể làm điều ngược lại 
bằng cách ép kiểu chuỗi thành số. (Xem thêm ví dụ này trong file 
stringconversion.txt của phần Tài nguyên di kèm.) 


var myNumString - "100"; 
var myNum = Number(myNumString); 


Mách nhỏ JavaScript tự chuyển đổi chuỗi thành số khi chuỗi này được sử 
dụng trong ngữ cảnh của số. Tuy n thực tế, việc chuyển đổi ngầm 


này nhiều khi không hiệu quả và tlà ban nên chuyển đổi tường minh 
khi cần. Tất nhiên điều này khiến Chương trình của bạn dài ra, nhưng như 
thế vẫn tốt hơn là phụ thuộc vào trì Ông dịch JavaScript. 


Chuyển đối kiểu logic 

Kiểu logic được tự động chuyển sang kiểu số khi sử dụng trong ngữ cảnh một 
số. Giá trị của true là 1 và false là 0. Khi được sử dung trong ngữ cảnh một 
chuỗi, true trở thành "true", và false trở thành "false". Dùng hàm 
Boolean( ) nếu bạn cần chuyển đổi chính xác số hoặc chuỗi sang giá trị logic. 


` m A 

Bai tập 

1. Khai báo ba biến - một số và hai chuỗi. Số có giá trị 120 và chuỗi là *5150" 
và “Hai trám ba mươi”. 


Tạo một mảng mới với ba phần tử số và hai phần tử chuỗi. 
3. Sử dụng hàm "alert() để hiển thị chuỗi sau, nhớ sử dụng ky tự thoát: Phản 


p 


4. 


ứng của Steve thật “Dễ thương!” . 

Sử dụng Firebug để kiểm tra ba website ưa thích của ban. Xem kỹ những lỗi 
JavaScript mà Firebug báo cáo. Sử dụng IE để mở các website này và thử gỡ 
lỗi bằng cách sử dung các công cụ dành cho IE và những công cụ liên quan 
khác. 


Chuong 5 
Sử dung toán tử và biểu thức 


Sau khi đọc xong chương này, bạn có thể: 


» Hiểu được các toán tử có trong JavaScript. 


= Su dung các toán tử JavaScript để thực hiện tính toán, kiểm tra dáng thức, 
kiém tra các quan hé và các phép gán. 


= Sử dung toán tử void để mở cửa số mới bằng một liên kết. 


Tìm hiểu về các toán tử 


Chuẩn ECMA-262 phân loại toán t hành r eu dang khác nhau. Bao góm: 


» Toán tử cộng 

» Toán tử nhân 

» Toán tử thao tác bit 

= Toán tử bằng 

» Toán tử quan hé 

» Toán tử một ngôi 

» Toán tử gán 
Các toán tử có thể được sử dụng cho giá trị chữ, biến cũng như các đối tượng 
khác trong JavaScript. 


Toán tử cộng 


Thuật ngữ toán tử cộng bao hàm cả toán tử cộng và trừ. Thuật ngữ này nghe 


có vé nhu đã bị đặt nhầm nhung như tất cả chúng ta đều biết, phép trừ chi là 
phép cộng với số âm. Ký hiệu tương ứng cho toán tử cộng và trừ là + và - Sau 
đây là một vài ví dụ về cách thức dùng hai toán tử này. 


Chú ý Bạn có thể tìm các ví dụ này trong file additiveops.txt của phần Tài 


nguyên di kém. 


4 + 5; // Kết quà là 9. 
X + y; // Cộng x và y với nhau. 
5 - 1; // Kết quả là 4. 


Toán tử cộng được thực thi theo nhiều cách tùy theo loại giá trị được cộng vào. 
Khi cộng hai chuỗi với nhau, toán tử cộng ghép đối số bên trái và bên phải với 
nhau. Khi cộng khác loại, bạn có thể nhận được kết quả kỳ lạ vì JavaScript cần 
phải chuyển đổi một trong các loại đấy trước khi thực hiện toán tử cộng (hoặc 

các toán tử khác). Ví dụ, bạn sẽ khô được kết quả mong muốn khi bạn 

nghĩ bạn có một biến số nhưng trì h JavaScript lại hiểu đó là chuỗi. 
Dưới đây là một vài ví dụ cụ thể: 


var aNum = 947; 

var aStr- "Rush"; 
var anotherNum = 53; 
var aStrNum "43"; 
var result1 aNum + aStr; // Kết quả sé là chuỗi "947Rush"; 
var result2 aNum + anotherNum; // result2 sé là số 1000; 
var result3 aNum + aStrNum; // result3 sẽ là số 94743; 


Như đã thảo luận ở Chương 4 “Làm việc với biến và kiểu dữ liệu”, trong nhiều 
trường hợp, ban có thé thay đổi truc tiếp hoặc chuyển đổi kiểu dữ liệu này sang 
kiểu dữ liệu khác trong JavaScript. Hãy xem lại biến resu1£3 trong ví dụ trước. 
Có lé bạn muốn resu1£3 lưu giá tri kết quả tính toán của 947+43. Nhưng vi giá 
trị thứ hai, aSt rNum, là một chuỗi nên biểu thức ghép hai giá trị lại thay vi dùng 
phép cộng toán hoc cho các con số. Tuy nhiên, nếu ta dùng hàm ToNumber ( ) 
chuyển đổi aSt rNum sang kiểu dữ liệu số, câu lệnh sẽ thuc thi biểu thức toán 
hoc, trong trường hợp này là phép cộng. Đầy là đoạn mã đã được sửa lai theo 
hướng bạn muốn: 


var aNum = 947; 


var aStrNum 
var result3 


ToNumber ("43"); 
aNum + aStrNum; // result3 sé là 990; 


Toán tử nhân 


Cũng như toán tử cộng, toán tử nhần thực hiện phép tính nhân và chia. Toán tử 
nhân (*) nhân hai số với nhau, còn toán tử chia (/) thì chia các số cho nhau. Đây 
là một ví dụ về toán tử nhân và kết quả đầu ra của nó: 


javascript:alert(2 * 2); 


Message from webp... I 


` 


Toán tử nhân còn bao gồm toán tử mô-đun, được thể hiện bằng ký tự phần trăm 
(%). Toán tử mô-đun cho ra kết quả là phần dư của phép chia hai số với nhau. Ví 
dụ, phần dư của 4 chia cho 3 là 1, được thể hiện ở đoạn mã tiếp theo: 


Chú ý Bạn có thể tìm các ví dụ này trong file multiplicativeops.txt của phần 


Tài nguyên đi kèm. 


javascript:alert(4 % 3); 


Kết quả được hiển thi ở đây: 


Message from webp... I— 


Toán tu thao tác bit 


Toán ti? thao tác bit bao góm AND, OR, XOR, NOT, Shift Left, Shift Right 
With Sign, và Shift Right With Zero Fill. Mỗi toán tử được thé hiện bởi một 
hoác mót vài ky tu nhu trong Báng 5-1. 


BÁNG 5-1 Toán tử thao tác bit. 


Toán tử Nghĩa 


& AND 
| OR 
^ XOR 


số NOT 


«« Shift Left 
>> Shift Right With Sign 
>>> Shift Right With Zero Eill 


Cuốn sách này không đề cập chi tiết về toán tử thao tác bit, tuy nhiên toán tử này 
vẫn sẽ được đề cập kỹ hơn ở các chương sau. Bạn có thể tham khảo thêm thông 
tin về toán tử thao tác bit trong tài liệu của chuẩn ECMA-262. 


Toán tử bằng 


Chúng ta dùng toán tử bằng để kiểm tra xem hai biểu thức giống hay khác nhau. 
Các toán tử này luôn trả về kiểu dữ liệu Boolean: true (đúng) hoặc false 
(sa1). 


BẢNG 5-2 Toán tử bằng. 


Toán tử Nghĩa 


Không bằng. 


Bằng, sử dụng phương pháp chặt chế 
J|== Không bằng, sử dụng phương pháp chặt chẽ hơn. 


Bảng 5-2 này cho thấy chúng ta có thể kiểm tra điều kiện bằng hoặc không bằng 
theo hai cách khác nhau. Những cách thức này khác nhau ở mức độ nghiêm ngặt 
- mức độ để xác định hai giá trị có thực sự bằng nhau hay không. Nghiêm ngặt 
hơn toán tử bằng (==) là toán tử bằng (===). Toán tử này không chỉ yêu cầu giá 
trị của biểu thức bằng nhau, mà kể cả kiểu dữ liệu cũng phải giống hệt nhau. 
Kiểm tra nghiêm ngặt sẽ xác định chuỗi với giá trị là "42" không bằng với số 
có giá trị 42, trong khi kiểm tra ít nghiêm ngặt hơn sẽ cho kết quả là hai giá trị 
này bằng nhau. Ví dụ dưới đây sẽ giúp các ban hiểu rõ hơn. 


Kiểm tra toán so sánh tử bằng 


1. Dùng Visual Studio, Eclipse hoặc một trình soạn thảo khác thay đối file 
equality.htm trong thư mục mã mẫu Chương 5, phần Tài nguyên đi kèm. 


2. Trên trang web, thay thế dòng chú thích TODO bằng đoạn mã in đậm dưới 
đây. (Có thể tìm thấy đoạn mã này trong file equality.txt). 


<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN' 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 


</head> 
<body> 

</body> 
</html> 


3. Dùng trinh duyệt mở trang vừa 
báo hai biến x và y. Bien x được 


<title>Toán tử báng«/title» 

«script type-"text/javascript'» 

var x = 42; 

var y = "42"; 

if (x ==y){ 
alert("x báng y qua phép kiém thü 

) else ( 
alert("x khóng báng y") 

} 


</script> 


à này khá rõ ràng. Đoạn mã khai 
trị là số 42, và y được lưu giá trị là 


chuỗi "42" (chú ý đến dấu nháy kép). Kiểm tra ở cấp đơn giản, sử dung ==. 
Loại kiểm tra này chỉ so sánh giá trị và bỏ qua việc xem xét sự giống và khác 
trong kiểu dữ liệu của biến. Khối lệnh if gọi hàm alert() thích hợp dựa 
trên kết quả. Bạn có thể sẽ thấy một thông báo như sau: 


Message from webpage ¬-=. 


A x không bång y 


4. Thay đổi cách thức kiểm tra toán 


bằng phương thức kiểm tra nghiêm 


ngặt. Dé làm được điều này, đầu tiên phải thay đối toán tử bằng ở trên và sử 
dụng toán tử bằng ở chế độ nghiêm ngặt (đó là ===), sau đó thay đổi hàm 
alert dé đọc nghiêm ngặt thay vi don giản. Dưới dày là đoạn mã đầy 
đủ (dòng thay đổi được in đậm và nằm trong file equality2.txt của Tài 


nguyên di kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN' 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 


<title>Toán tử bằng</title> 
«script type-z"text/javascript"» 
var x = 42; 
var y = "42"; 
if (x === y) { | l 
alert(“x bằng y qua kiểm thử nghié 
} else { 
alert("x không bằng y"); 


</script> 
</head> 
<body> 
</body> 
</html> 


5. Một lần nữa dùng trình duyệt mở trang. Bây giờ, bạn sé sử dung cách thức 
nghiêm ngặt hơn hơn để kiểm tra tương đương, ===. Kiểm tra nghiêm ngặt 
hơn giống kiểm tra đơn giản ở cách thức kiểm tra dữ liệu, nhưng khác nhau 
là nó kiểm tra cả kiểu dữ liệu của biến. Hàm alert() thích hợp được goi 
dựa trên kết quả kiểm tra. Và lần này hộp thoại thông báo sẽ có dạng như 
Sau: 


Message from webpage ¬-=. 


A x không bång y 


Toán tu quan hé 


Toán tử quan hệ so sánh các biểu thức với nhau, hoặc kiểm tra giá tri cho trước 


có nằm trong một danh sách hay không hoặc thuộc một kiểu dữ liệu nào đó hay 
không. Bảng 5-3 liệt kê các toán tử quan hệ trong JavaScript. 


BẢNG 5-3 Toán tử quan hệ 


Toán tử Nghĩa 


> Lớn hơn 

< Nhỏ hơn 

>= Lớn hơn hoặc bằng 

<= Nhỏ hơn hoặc bằng 

in Nằm trong một biểu thức hoặc đối tượng 


instanceof Là một thực thể (instance) của một đối tượng 


Có thể các bạn đã quen với bốn toán tử quan hệ đầu tiên của Bảng 5-3, tuy nhiên 
tôi vẫn xin giới thiệu một vài ví dụ về các toán tử này. Xem xét đoạn mã dưới 
đây (bạn có thể tìm thấy đoạn mã này trong file relational.txt của phần Tài 
nguyên di kèm): 


if (3 > 4) { 
// viết mã ở đây 
} 


Số nguyên 3 luôn nhỏ hơn số nguyên 4, vì thë đoạn mã này không bao giờ trả về 
giá trị true (đúng), và đoạn mã trong khối if cũng không được thực thi. Tương 
tự, đoạn mã này kiểm tra xem biến x có nhỏ hơn biến y hay không: 


if (x< y) { 
// ciét mã ở đây 
} 


Toán tử In 

Toán tử in thường được dùng để đánh giá xem một thuộc tính có nằm trong đối 
tượng hay không. Cần chú ý rằng toán tử in tìm kiếm sự tồn tại của một thuộc 
tính chứ không phải giá trị của thuộc tính đó. Do đó, đoạn mã dưới đây (có thể 
tìm trong file inop.txt của phần Tài nguyên đi kèm) sẽ thực thi được vì thuộc 
tính có tên star nằm trong đối tượng myObj. 


var myObj = { 
star: "Algol", 


constellation: "Perseus" 
F; 
if ("star" in myObj) { 
alert("Có một thuộc tính có tên star trong d: 
} 


Toán tử in thường được dùng để duyệt đối tượng. Sẽ có một ví du trình bày cu 
thể cách dùng của toán tử này ở Chương 8 “Đối tượng trong JavaScript”. 


Toán tử instanceof 


Toán tử instanceof kiểm tra xem một biểu thức cho sẵn, thường là biến, có 
phải là thực thể (instance) của đối tượng được đưa vào trong biểu thức hay 
không. Điều này nghe có vẻ phức tạp. Thay vì tìm cách giải thích nó, tôi sẽ đi 
tháng vào ví dụ sau đây dé bạn thấy dễ hiếu hơn: 


var myDate - new Date(); 
if (myDate instanceof Date) ( 

// viết mã ở đây 
} 


Bởi vì biến myDate là thực thể của ích hợp sẵn là Date, toán tử 
instanceof trả về giá tri true. Toán tit instanceof có thể được dùng cho 
các đối tượng do người dùng định nghĩa cũng như đến đối tượng tích hợp sẵn 
như minh họa ở ví dụ trên. 


Toán tử một ngôi 


Toán tử một ngôi chỉ có một toán hạng hoặc chỉ làm việc với một biểu thức đơn 
trong JavaScript. Bảng 5-4 liệt kê các toán tử một ngôi trong JavaScript. 


BẢNG 5-4 Toán tử một ngôi. 


Toán tử Nghĩa 

delete Loại bỏ thuộc tính. 

void Trả về undefined. 

typeof Trả về một chuỗi đại diện cho kiểu dữ liệu. 


++ Tăng một số. 


-- Giåm môt sõ. 

+ Chuyển kiểu của toán hạng sang kiểu số. 
- Phủ định toán hạng. 

~ Phủ định (Thao tác bit). 

! Phủ định (logic). 


Bởi vì cách dùng toán tử một ngôi không rõ ràng nên trong chương này tôi sẽ 
giải thích chi tiết hơn. 


Tang và giảm 

Toán tử ++ và -- được dùng để tăng hoặc giảm một số như minh hoa ở đoạn mã 
dưới đây (Bạn có thể tìm thấy đoạn mã này trong file incrementing.txt của phần 
Tài nguyên đi kèm): 


var aNum = 4; 
aNum++; 
++aNun; 


Vi trí đặt toán tử so với toán hang s 
mã. Khi được thêm vào sau biến, n òng mã thứ hai của ví dụ trên, toán 
tử trả về giá trị trước: khi tăng (hoặc giám trong trường hợp tương ứng). Khi 
được đặt ở trước toán hạng, như ở dòng mã cuối của ví dụ trên, toán tử trả về giá 
trị sau khi tăng (hoặc giảm). 


sẽ xác định giá trị trả về từ đoạn 


Đây là hai ví dụ thể hiện sự khác biệt giữa việc đặt toán tử ở trước hay sau trong 
đoạn mã. Trong ví dụ đầu tiên toán tử được đặt ở sau: 


var aNum = 4; 
var y = aNum++; // y bây giờ có giá trị là 4, còn aNum có gii 


Trong ví dụ thứ hai, toán tử được đặt ở trước: 


var aNum = 4; 
var y = ++aNum; // Cả y và aNum đều có giá tri là 5 


Trên thực tế, bạn sẽ dùng toán tử tăng chèn sau nhiều hơn toán tử tăng chèn 
trước hoặc toán tử giảm chèn trước vì nó là bộ đếm tiện lợi trong cấu trúc vòng 
lặp. Bạn sẽ tìm hiểu về vòng lặp trong JavaScript ở Chương 6 “Điều khiển luồng 
với lệnh điều kiện và vòng lặp”. 


Chuyển sang kiểu số với ký hiệu cộng 

Ký hiệu cộng (+) được dùng để chuyển một giá trị sang kiểu số. Trên thực tế, tôi 
thấy toán tử này không đáng tin cậy — hoặc ít nhất là không đủ độ tin cậy để đưa 
vào sản phẩm thương mại. Khi tôi cần chuyển một kiểu bất kỳ sang kiểu số, tôi 
dùng hàm tường minh ToNumber ( ). Tuy nhiên ban có thể sử dụng ky tự cộng 
như là toán tử một ngôi để chuyển kiểu giá trị, như ví dụ dưới đây (đoạn mã ví 
dụ này cũng có trong file converting.txt của phần Tài nguyên đi kèm). 


var x = +"43"; 


Đoạn mã này có kết quả là chuỗi "43" được chuyển thành kiểu số bằng mã 
JavaScript và số 43 được lưu trong biến x. 


Tạo số âm với dâu trừ 

Không ngạc nhiên khi bạn dùng dấu trừ (-) trước một số, số đó sẽ được chuyển 
thành số âm, như trong ví dụ dưới đâ này có trong file creating.txt của 
phần Tài nguyên đi kèm). 


var y = "754"; 
var negat - -y; 
alert(negat); 


Phủ định theo thao tác bit và logic 


Ký tự tương duong (~) là toán tử phủ dinh theo thao tác bit và dấu chấm than (!) 
là toán tử phủ dinh theo logic. Hai toán tử này phủ dinh lẫn nhau. Trong trường 
hợp thao tác bit, giá tri bó sung bit của toán tử ^ được dùng, giá trị 0 được 
chuyển thành giá trị -1 và giá trị -1 chuyển thành giá trị 0. Toán tử phủ định 
logic, loại phủ định thường dùng trong lập trình JavaScript, là để phủ định biểu 
thức. Nếu biểu thức đúng, toán tử phủ địch logic biến giá trị biểu thức thành sai. 


Để tham khảo thêm về toán tử thao tác bit, xem trang: 
http://en.wikipedia.org/wiki/bitwise_ operation. 


Sử dụng toán tử delete 


Toán ti? delete (xóa) nhận vào thuộc tính của một đối tượng hoặc chỉ muc 
(index) của một mảng và loai bỏ nó hoặc chuyển giá tri thành undefined. Đây là 
ví dụ đơn giản cho thao tác dùng mảng: 


var myArray = ("The RCMP", "The Police", "State Patrol"); 
delete myArray[0]; // Máng myArray bây giờ chi chứa "The Pol 


Đoạn mã trên tao một mảng có tên myArray và ngay tức thi xóa giá tri ở chỉ 
mục đầu tiên. Toán tử delete cũng được thực hiện cho đối tượng như trong ví 
dụ dưới đây: 


Sử dung toán tử delete với đối tượng 


1. Dùng Visual Studio, Eclipse hoặc trình soạn thảo khác thay đổi file 
deleteop1.htm trong thư mục mã mẫu Chương 5 của phần Tài nguyên đi 
kèm. 


à.dùng toán tử delete ở những bước 
ích TODO bằng đoạn mã in đậm 
ile deleteop1.txt của phần Tài 


2. Tạo nội dung cho một trang cơ bản 
sau. Trong trang web, thay thế « 
dưới đây. (Có thể tìm thấy đoạ 
nguyên đi kèm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 

<title>Toán tử delete</title> 

«script type-"text/javascript'» 

var star = (Y; 
star["Polaris"] - new Object; 
star["Mizar"] = new Object; 
star["Aldebaran"] = new Object; 
star["Rigel"] - new Object; 
star["Polaris"].constellation - "Ursa Minor"; 
star["Mizar"].constellation = "Ursa Major"; 
star["Aldebaran"].constellation - "Taurus"; 
star["^Rigel"].constellation = "Orion"; 
</script> 
</head> 
<body id="mainbody"> 


«script type-z"text/javascript'"» 
for (starName in star) {** 
var para = document.createElement 
para.id = starName; 
para. appendCh11d( document.createT‹ 
document. getElementsByTagName (“bot 
appendChild(para), 
J 
</script> 
</body> 
</html> 


Trong phân <head>, ban đã tạo một đối tượng ngôi sao và một vài đối tượng 
ngôi sao khác, được đặt tên là star[^starname" ]. Sau đó, ban cho đối 
tượng một thuộc tính constellation (chòm sao) có giá trị là tên chòm sao. 
Sau đó, trong phần <body> của đoạn mã, vòng lặp for sẽ thực thi để duyệt 
từng ngôi sao trong đối tượng ngôi sao. Đoạn mã này sử dụng mô hình đối 
tượng tài liệu (DOM) sé được giới thiệu ở Chương 10 "Mô hình đối tượng tài 
liệu". Còn ở chương này, chúng ta không quan tâm nhiều đến ý nghĩa của 
đoạn mã trong vòng lặp for. 


3. Lưu file và dùng trình duyệt m quả như sau: 


Polars: Ursa Minor 
Mizar: Ursa Major 


Aldebaran: Taurus 


Rigel: Onton 


4. Thêm toán ti? delete ở phía trên vòng lặp for trong đoạn mã để loại bó 
constellation khói Polaris. Đoạn mã (có trong file deleteop2.txt của phần 
Tài nguyên đi kèm) sẽ có dạng như dưới đây: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Toán tử delete</title> 


«script type-"text/javascript'» 
var star =  {}; 

star["Polaris"] = new Object; 
star["Mizar"] - new Object; 
star["Aldebaran"] - new Object; 
star["Rigel"] = new Object; 


star["Polaris"].constellation = "Ursa Mir 
star["Mizar"].constellation - "Ursa Major' 
star["Aldebaran"].constellation - "Taurus' 
star["Rigel"].constellation - "Orion"; 
</script> 


</head> 
<body id="mainbody"> 
<script type="text/javascript"> 
delete(star["Polaris"].constellation); 
for (starName in star) ( 
var para = document.createElement| 
para.id = starName; 
para. appendCh11d( document.createT‹ 
":" + star[starName |. cor 
.getElementsByTagName( "bo‹ 
appendChild(para); 


</script> 
</body> 
</html> 


Luu ý toán ti? delete dugc thêm vào thé <script> trong phân body cüa 
văn bản (được in đậm). 


5. Lưu file và dùng trình duyệt mở trang. Kết quả trả về sẽ như dưới đây: 


eo Etsi [rie cò 0i 


Polaris: undefined 
Mizar: Ursa Major 


Aldebaran: Taurus 


Rigel: Orton 


Việc sử dung toán tử delete sé khiến thuộc tính constellation của Polaris 
trở thành undefined. Ban có thể xóa toàn bộ đối tượng trong Polaris bằng cách: 


delete(star["Polaris"]); 


Trả vé kiểu biến với toán tử typeof 


Toán tử typeof trả về kiểu biến của một toán hạng cho trước. Sử dung typeof, 


ban có thé xác dinh biến được tao và biến đó dang được dùng dưới dạng chuỗi, 
số, boolean hoặc biến đó là một loại đối tượng hay hàm nào đó. Xem đoạn mã 
dưới đây: 
var star- (Y; 
if (typeof(star) ==  "object") ( 

alert("star là một đối tượng"); 
} 


Toán tử typeof trả về "number" nếu đang đánh giá một số, trả về "string" nếu 
đang đánh giá một chuỗi ky tự, và (có thể thấy từ ví dụ) trả về "object" nếu đang 
đánh giá một đối tượng. Khi bạn dùng các thuộc tính, JavaScript có thể giả định 

rằng bạn muốn biết kiểu biến của thuộc tính đó, hơn là kiểu của đối tượng, vì thế 
JavaScript sẽ trả về kiểu dữ liệu của thuộc tính. Đây là ví dụ mượn một đoạn mã 
nhỏ từ ví dụ ở phần trước của chương. 


Sử dung toán tử typeof 


1. Sử dụng Visual Studio, Eclipse 
typeof.htm trong thư mục mã 


soạn thảo khác thay đối file 
5 của phần Tài nguyên đi kèm. 


2. Trên trang web, thêm đoạn mã 
của phần Tài nguyên di kém): 


am dưới đây (có trong file typeof.txt 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 
<title>Ví dụ vé toán tử Typeof«/title» 
«script type-"text/javascript'» 

var star = (Y; 

star["Polaris"] - new Object; 
star["Polaris"].constellation - "Ursa Minor"; 
alert(typeof star["Polaris"].constellation); 
</script> 

</head> 

<body> 

</body> 

</html> 


3. Trong đoạn má trong thé <script> tao một đối tượng mới cho ngôi sao 


Polaris và thiết lập thuộc tính constellation bằng "Ursa Minor”. Sau 
đó, gọi một hộp thoại thông báo sử dung toán tử typeof để thông báo kiểu 
của thuộc tính star[^Polaris"].constellation là một chuỗi. 


4. Lưu file và dùng trình duyệt mở trang. Bạn sẽ nhận được một hộp thoai 
thông báo như sau: 


Message from webp... I- 


* 


Sử dung toán tử typeof, bạn còn có thể thấy được su khác biệt giữa nu.11 và 
undefined. 


z > g 
Toán tử void 

Nếu nhu bạn từng xem một đoạn mã nguồn trong JavaScript, ban có thể gặp toán 
tử void. Toán tử void trả về giá tri undefined sau khi kiểm tra đối số của nó. 
Điều này có nghĩa là toán tử void cho phép lập trình viên web gọi một hàm mà 
không hiển thị kết quả trong trình duyệt. Dù toán tử này và giao thức mã giả 
javascript: tồn tại trong JavaScript, hãy tránh dùng chúng khi lập trình. Cuốn 
sách này sé đề cập đến toán tử void và giao thức mã giá javascript: để bạn hiểu 


được vai trò của toán tử này khi gỡ lỗi cho má JavaScript. 


Cách thức dùng phổ biến của toán tử void là để gửi form hoặc để mở cửa sổ 
mới. Ví dụ dưới đây minh họa cách dùng của toán tử vo1d: 


void(window.open()); 


Cách dùng phổ biến hơn là đặt đoạn mã javascript :void vào đường link đến 
trang web để mở cửa sổ mới, như dưới đây: 


«a href="javascript:void(window.open())">Mở cửa sổ mới bằng : 


Chú ý Toán tử void, hoặc cu thé hơn là cách dùng của giao thức mã giả 


javascript: trong thuộc tính href, nhìn chung không được khuyến khích 
dùng. 


Toán tử gân 

Trong chương này bạn đã biết đến 
cuốn sách. Toán tử gán chủ yếu (th sử dụng nhiều nhất) là dấu bằng 
(=). Loại toán tử này được biết đến án tử gán đơn giản. JavaScript 
có nhiều toán tử gán khác, bao gồm nhữg toán tử được liệt kê ở Bảng 5-5. 


, và ban sẽ gáp chúng xuyên suốt 


BẢNG 5-5 Các toán tử gán phức hợp. 


Toán tử Nghĩa 


*- Nhân giá trị của toán hang trái với toán hang phải. 

/= Chia giá trị của toán hạng trái cho toán hang phải. 

%= Lấy số dư của phép chia mô-đun của toán hang trái và phải. 
+= Cộng toán hạng phải vào toán hạng trái. 


-= Trừ toán hang trái một giá trị bằng toán hang phải. 


<<= Thao tác đẩy bit sang bên trái. 

>>= Thao tác đẩy bit sang bên phải. 

>>>= Thao tác đẩy bit của số dương sang bên phải. 
&= Thao tác bit AND. 

A= Thao tác bit XƠR. 


= Thao tác bit OR. 


Các toán tử gán phức hợp cung cấp cách viết tắt giúp tiết kiệm một số thao tác 
gð phím và tiết kiệm vài byte dữ liệu. Ví dụ, bạn có thể cộng hoặc trừ một số sử 
dụng += và -=, tương ứng, như ở ví dụ dưới đây: 


var myNum = 10; 
alert(myNum); 
myNum += 30; 
alert(myNum); 


Hộp thoại thông báo đầu tiên, sau khi biến được định nghĩa và gán bằng 10, là: 


Message from webp... = 3 — 


Hộp thoại thông báo tiếp theo, sau khi sử dụng toán tử gán cộng phức hợp, là: 


Message from webp... EES 


Tầm quan trọng của việc thu gà 


Tiết kiệm kích cỡ là một đề tài quan trọng đối với mỗi lập trình viên 
JavaScript. Tiết kiệm kích cỡ liên quan đến việc lập trình với các phương 
thức tắt sao cho kết quả lập trình JavaScript (hoặc các ngôn ngữ khác trong 
cùng một vấn đề) sử dụng ít bộ nhớ và băng thông hơn. Khi bạn tận dụng 
được tính năng để tiết kiệm mã, ví dụ các câu lệnh gán phức hợp, chương 
trình sẽ vận hành tốt hơn. 


Kích cỡ mã nhỏ hơn nghĩa là người dùng sẽ tải xuống đoạn mã nhẹ hơn. 
Việc xác định số lượng byte bạn có thể tiết kiệm hoặc được phép dùng, là rất 
khó. Nhiều lập trình viên có thể phản bác rằng hiệu quả là không đáng kể - 
và với những đoạn mã nhỏ, ý kiến này có thể đúng, đặc biệt khi số lượng 
người dùng có băng thông rộng hoặc kết nối nhanh hơn hiện ngày càng tăng. 
Nhưng hiệu quả của các phương thức tắt thông minh này có thể rõ với 
những đoạn mã lớn hơn, đặc biệt khi những đoạn mã được tải từ kết nối 
quay số hoặc các loại kết nối chậm khác. 


Một phương pháp phổ biến để tiết kiệm kích cỡ mã trong quá trình tải là thu 


gon JavaScript. Việc thu gon mã loại bỏ toàn bộ các phần tử không cần thiết 
trong file JavaScript của một trang web đang hoạt động. Các phần tử không 
cần thiết bao gồm chú thích, phím cách và ký tự xuống dòng. Kết quả của 
việc thu gọn mã không quá rõ rệt trừ khi bạn chèn lại các phím cách cũng 
như các ký tự xuống dòng. 


Toán tử phẩy 


Toán tử phẩy phân tách các biểu thức với nhau và cho phép thực thi lần lượt các 
biểu thức đó. Thông thường, dấu phẩy được dùng để phân tách các lệnh khai báo 
biến, cho phép nhiều biến có thể được khai báo trên cùng một dòng: 


var num1, num2, num3; 
Ngoài ra, ban cüng có thé khói tao giá tri cho các bién: 
var num1=3, num2-7, num3-10; 


Bài táp 


1. Sử dung toán tử cộng (+) để hiển thi ba hộp thoai thông báo alert() trên 
màn hình (bạn có thể dùng ba chương trình riêng biệt). Hộp thoại thông báo 
đầu tiên cộng hai số. Hộp thoại thông báo thứ hai cộng một số và một chuỗi. 
Hộp thoại thông báo số ba cộng hai chuỗi. Tất cả đều được biếu diễn bằng 
các biến. 

2. Sử dung toán tử tăng (++) chèn sau để tăng một số lưu trong biến. 

3. Hiên thị giá trị của biến trước, trong và sau khi tăng. Sử dung toán tử tăng 
chèn trước để tăng một số và hiển thị kết quả của nó trước, trong và sau khi 
tăng bằng hộp thoại thông báo. 

4. Sử dụng toán tử typeof để kiểm tra kiểu biến đã tao ở Bài tập 1. 


5. Đúng hay sai: Các toán tử một ngôi thường không xuất hiện trong 
JavaScript. 


6. Đúng hay sai: Ban nén tiết kiệm kích cỡ mã (sử dung các phương thức tắt 
của JavaScript bất cứ khi nào có thể), thay vì viết xuống dòng và thụt đầu 
dòng, khiến việc tải trang trở nên chậm hơn. 


Phần 2 
Áp dung JavaScript 


Chương 6: Điều khiến luồng với câu lệnh điều kiên và vòng lá 


Chương 7: Làm việc với hàm 
Chương 8: Các đối tượng trong JavaScript 
Chương 9: Mô hình đối tượng trình duyệt 


Chương 6 
Điều khiển luồ 
điều kiện và vò 


i câu lénh 


Sau khi doc xong chương này, bạn có the: 


= Nắm được các câu lệnh điều kiện trong JavaScript. 

= Sử dụng câu lệnh điều kiện if else để điều khiển việc thực thi các đoạn 
mã. 

» Sử dụng câu lệnh switch. 

= Nắm được các loại cấu trúc điều khiển vòng lặp trong JavaScript. 

= Sử dụng vòng lặp while và do..wh1 1e để chay lại các đoạn mã. 


» Sử dụng các loại vòng lặp for để duyệt trong một khoảng giá trị. 


If (và cách dùng) 


Câu lệnh if đánh giá một biểu thức và dua trên kết quả dé quyết dinh thực thi 
đoạn mã nào trong chương trình. Câu lệnh 7f phức hợp quyết định đoạn mã 
được thực thi dựa trên nhiều điều kiện. Nếu từng đặt vé máy bay qua mạng, bạn 
sẽ hình dung ra quy trình ra quyết định. Ví dụ, bạn muốn sắp xếp đi nghỉ vào 
cuối tuần. Vì thế, khi quyết định đặt mua vé, bạn tính toán: “Nếu giá vé thấp hơn 
\$350, tôi sẽ đặt chỗ, nếu không, tôi sé chọn địa điểm khác”. Tương tự, giả sử tôi 
muốn di đổ rác. Tôi nén mang rác ra via hé ngay tối nay hay đợi đến sáng hôm 
sau? Nếu dự báo thời tiết là đêm đó trời sẽ có gió, rác có thể bị thổi tung sang bãi 
cỏ của nhà hàng xóm, nhưng nếu đợi đến sáng, tôi có thể lỡ xe rác. 


Mặc dù không giúp bạn trong những quyết định thực tế này, nhưng JavaScript sẽ 
hỗ trợ đáng kể bằng việc ra những quyết định như điều khiển cách thức thực 
hiện của chương trình dựa trên việc liệu biến có chứa một giá trị cụ thể nào đó 
hay không hoặc trường nhập dữ liệu nào đó được nhập đúng hay sai. Phần này sẽ 
đề cập đến cú pháp của câu lệnh 7f trong JavaScript. 


f 


Cú pháp của câu l 
Cú pháp của câu lệnh 7f rất quen t 
ngữ lập trình khác như Perl hoặc P 


ng người từng sử dụng các ngón 
c cơ bản của câu lệnh if là: 
if (điều kiện) { 

// Viết mã ở đây 
J 


Chú ý Câu lệnh if còn được goi là câu lệnh điều kiện if. Tôi sẽ dùng cá hai 
thuật ngữ này để các bạn làm quen với cả hai. Bạn đừng nhầm lẫn giữa câu 


lệnh điều kiện if (toàn bộ câu lệnh if) với điều kiện if là biểu thức 1ogic 
mà câu lệnh if đánh giá. 


Câu lệnh if kiểm tra xem tính hợp lệ và chính xác của điều kiện để quyết định 
thực thi đoạn mã trong câu lệnh điều kiện (trong cặp ngoặc nhọn). Điều kiện là 
một biểu thức logic, khi được đánh giá là true (đúng) thì câu lệnh if thực thi 
đoạn mã trong thân lệnh. (Bạn cũng có thể phủ định biểu thức trong điều kiện để 
đoạn mã trong thân lệnh thực thi nếu biểu thức đánh giá là false - sai). Hãy 
nhớ lại cách dùng kiểu logic và toán tử một ngôi ở Chương 5 “Sử dụng toán tử 
và biểu thức”. Dưới đây là ví dụ: 


if (! điều kiện) { 
⁄/ viết mã ở đây 
} 


Trong trường hợp này, câu điều kiện bát đầu với toán tử 

phủ định, tức là điều kiện này cần được đánh giá là fa1se (sai) để đoạn mã bên 
trong thân lệnh được thực thi. 

Ví du về chi phí vé máy bay trên thực tế của ví du ở phần đầu chương này có thể 
tạo thành đoạn mã giả như sau: 


if (flightCost < 350) { //chi phí chuyến bay nhỏ hon 350 đô- 
bookFlight();//dát vé máy bay 
J 


Nếu giá vé thấp hơn 350 đô-la đoạn mã trong thân lệnh được thực thi. Ví dụ về 
quyết định đổ rác sẽ như sau: 


if (forecast != "windy") { //du báo trời không có gió 
takeGarbageOut(); //mang rác ra ngoài 
} 


Phần sau của chương này sé trinh b 


[Cách « ø câu lệnh e1se để thực thi các 
đoạn mã khi điều kiện là false (sé 


Bạn có thể dùng câu lệnh if với các toán tử được nhắc đến ở Chương 5, đặc biệt 
là các toán tử quan hệ để kiểm tra xem một giá trị lớn hơn hay nhỏ hơn một giá 
trị khác và toán tử bằng để kiểm tra xem hai giá trị có bằng nhau hay không. 
Xem xét ví dụ dưới đây: 


var x = 
var y = 3; 
//Kiém tra bàng nhau 
if (x == y) { 

// viết mã ở đây 
} 


Vì giá trị trong biến x (4) không bằng giá trị trong biến y (3), do đó đoạn mã 
trong câu điều kiện 7f (trong dấu ngoặc đơn) không được thực thi. Dưới đây là 
một ví dụ với toán tử quan hệ: 


4; 
3; 


var x 
var y 


4; 
3; 


// kiém tra quan hé 


if (x> y) { 
// viét má ó dày 
} 


Trong trường hợp này, giá trị trong biến x (4) lớn hơn giá trị trong biến y (3), 
đoạn mã trong dấu ngoặc đơn được thực thi. 


Phần tiếp theo giới thiệu một ví dụ mà bạn có thể tự thực hiện. Ví dụ này dùng 
hàm prompt ( ) để lẫy giá trị do người dùng nhập vào thông qua một giao diện 
đơn giản. 


Hàm prompt() trong trình duyệt Internet 
Explorer 


Kể từ Windows Internet Explorer 7, hàm prompt ( ) không được kích hoạt mặc 
dinh nữa. Nếu muốn dùng hàm prompt (.) với Internet Explorer, ban sẽ thấy một 
cảnh báo về bảo mật như ở Hình 6- thé là một trang với từ nu11, như 
cảnh báo ở Hình 6-2. 


C This website is usinga pte window toa for information T you trust this west, dic here to alow seipted'windous 


HÌNH 6-1 Đây là cảnh báo về bảo mật tạo ra bởi hàm prompt() trong Internet Explorer. 
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HINH 6-2 Khi sử dung giả giao thức javascript: Với hàm prompt(), dói khi ban có thé nhân 
được một trang với từ null. 


Bạn có thể tắt tính năng này bằng cách nhấn chuột vào thanh thông tin (ở Hình 
6-1) và chọn cho phép script, hoặc bằng cách thay đối thiết lập về báo mật. Bạn 
có thể thay đối các thiết lập về bảo mật trong Internet Explorer bằng cách chon 
Internet Options từ menu Tools, nhấn chuột vào tab Security, nhấn chuột vào 
Customer Level và kích hoat lua chon Allow Web Sites To Prompt For 
Information Using Scripted Windows trong phần Scripting. 


Tuy nhiên, ban không thể giả định người truy cập sẽ thiết lập nhu thế với trinh 
duyệt Internet Explorer của họ. Do đó, hàm prompt ( ) không còn hữu dụng nhu 
trước khi Internet Explorer 7 ra mắt. Nhiều lập trình viên kết luận rằng hàm 
prompt ( ) gây nhiều phiền toái (và tôi đồng ý rằng đôi khi nó làm nảy sinh 
nhiều vấn đề), nhưng nó cũng có nhiều ưu điểm và việc tắt nó đi chỉ góp phần rất 
nhỏ cho việc bảo mật. Hàm prompt cũng rất hữu ích cho mục đích kiểm thử, ví 
dụ như trong bài tập dưới dây. 


Sử dung if để quyết dinh luồng chay của chương trinh 


. Sử dung Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác thay 
đối file ifexample.htm trong thư mục mã nguồn mẫu của Chương 6, phần Tài 
nguyên đi kèm. 


. Trong trang này, thay dòng chú thích TODO bằng đoạn mã in đậm dưới đây 
(Đoạn mã này cũng nằm trong file ifexample.txt của Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Sử dung If«/title» 
</head> 
<body> 
«script type-"text/javascript'» 
var inputNum = prompt("Háy ập một số nhỏ hon 100:"); 
if (inputNum > 99) { 
alert(“Số, “ + 
} 


</script> 
<p>Đây là một ví du của Ch 
</body> 
</html> 


+ “, không nhỏ hon 100."), 


ng 6.</p> 


. Lưu và dùng trình duyệt mở lại trang này. Nếu bạn xem trang này bằng 
Internet Explorer và nhận được một cảnh báo bảo mật, bạn cần thay đổi các 
thiết lập vé báo mật như hướng dẫn ở trên. Bạn cũng có thể dùng FireFox 
hoặc các trình duyệt khác. 


. Khi ban xem trang, hộp thoại yêu cầu nhập một số nhỏ hơn 100 xuất hiện. 
Thông thường, Internet Explorer tự điền vào ô trống trong hộp thoại từ 
“undefined”. Nhập một số và nhấn OK như ví dụ sau: 


?) sử dung If - Mozilla Firefox 
lậtn Œhhsửa HếnHị lược? BDénhdáu Công Trợgúp 


| ^ http://localhost/Code/Chapter06/CompletedCode/ifexample,hm 


Hãy nhập một số nhỏ hon 100: 
5 | 


| ^ j © htp:(locahost/Code/Chapter06/CompletedCodejfexampls.him 


Đây là một vi du cua Chương 6. 


6. Tải lại trang và lần này khi được hỏi nhập một số lớn hơn 100. Bạn sẽ thấy 
thông báo sau: 


Sử dung If - Mozilla Firefox 
Téptin (Chnhsửa Hiénthi lược? Đánhdấu Công Trợgúp 


| ^ @ fie:/JJD:/Dropbox/Dropbox(1avaSrriptJ0, Ke hoach san xuat & thuat ngu/Tai nguyen/9780735645523-flles/Cr vy 


Số, 5150, không nhỏ hon 100. 
C] Không cho trang này tao các hộp thoai phụ 


Be 


Ngoại trừ HTML và các thé script 
đoạn mã hoạt động như dưới đây: 


đã được xem ở những ví dụ trước, 


Dòng đầu tiên trong thé «script» an thiết lập biến inputNum và sau 
đó gán cho biến này bằng với kết quả từ hàm prompt ( ): 


var inputNum = prompt("Hãy nhập một số nhỏ hơn 100:"); 


Những dòng mã tiếp theo sử dụng câu lệnh 7f để đánh giá giá trị trong biến 
inputNum. Nếu giá trị lớn hơn 99, một hộp thoại thông báo xuất hiện: 


if (inputNum > 99) { 
alert("Số, " + inputNum + ", không nhỏ hơn 190. "); 
} 


Ví dụ này còn rất sơ sài và những ví dụ sau sẽ hướng dẫn bạn cách cải tiến đoạn 
mã từ những gi ban đã hoc và sử dụng các kỹ thuật mới sẽ được học ở phần sau 
của chương này. 


Điều kiện phức hợp 


Có nhiều lúc bạn cần kiểm tra nhiều hơn một điều kiện trong cùng câu lệnh 7f. 


Xem lại ví dụ trước. Giả sử bạn muốn khách truy cập nhập vào một số trong 

khoảng từ 51 đến 99. Bạn cần kết hợp những kiểm tra trên trong cùng câu lệnh 

if: 

if ((inputNum < 51 ) || (inputNum > 99)) ( 
alert( "Số, "+inputNum+", không năm trong khoáng từ 50 

} 


Chú ý Ban cũng có thể viết câu lệnh if trên mà không cần thêm các dấu 
ngoặc đơn cho mỗi điều kiện cần đánh giá. Tuy nhiên, tôi thấy rằng việc 


thêm các dấu ngoặc đơn sẽ giúp đoạn mã dễ đọc hơn. 


Bạn có thể thấy đoạn mã hoàn chỉnh của ví dụ trước với câu lệnh if phức hợp 
được in đậm, trong Ví du 6-1. (Đoạn mã này có trong file listing6-1.htm của 
phần Tài nguyên đi kèm). 


VÍ DỤ 6-1 Câu lệnh if phức hợp 


<!DOCTYPE HTML PUBLIC "”"-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title2Suü dung Tf</title> 
</head> 
<body> 
<script type="text/javascript"> 
var inputNum = prompt("Hày nhâp môt sõ trong khoáng tü 50 
if ((inputNum < 51) || (inputNum > 99)) { 
alert( "Số, "+inputNum+", không nằm trong khoảng từ 
} 


</script> 

Đây là một ví du cua Chương 6. 
</body> 

«/html» 


Câu lệnh trong Ví dụ 6-1 sử dung toán tử logic OR và được doc là “Nếu 
inputNum lớn hơn 99 hoặc inputNum nhỏ hơn 51, thực hiện thao tác này”. 


Xem lại ví dụ mà chúng ta sử dụng nhiều trong chương này. Nếu nhập một số 
lớn hơn 99 hoặc nhỏ hơn 51, bạn sẽ nhận được một hộp thoại thông báo. Nhưng 


điều gi sẽ xảy ra nếu đầu vào không phái là một số? Điều gi xảy ra nếu bạn nhập 
vào từ boo? Ban sẽ không nhận được hộp thoại thông báo bởi vì điều kiện hiện 
tại chỉ kiểm tra biến lớn hơn hoặc nhỏ hơn các số được thiết lập. 


Do đó, đoạn mã cần kiểm tra giá trị trong biến có là số hay không. Bạn có thể 
thực hiện nhiệm vu này với hàm isNaN( ) và lồng các điều kiện vào nhau nhu 
dưới đây: 


if (isNaN(inputNum) || ((inputNum > 99) || (inputNum < 51))) 
alert(**”**Số **"** + inputNum + " không năm trong k 
} 


Đầu tiên, câu lệnh điều kiện sẽ kiểm tra xem giá trị trong biến inputNum có là 
số hay không. Nếu điều kiện kiểm tra đầu tiên này đạt giá trị true (người dùng đã 
không nhập số), chương trình không cần thực hiện các thao tác sau và ngừng 
kiểm tra các điều kiện còn lai. Nếu người dùng nhập số, hàm isNaN trả về 
false, câu lệnh if sẽ tiếp tuc thực hiện việc kiểm tra giá trị số nằm trong cặp 
ngoặc đơn và tạo thành một bộ điều kiện. Kết quả khi chạy với giá trị nhập vào 


là boo, được thể hiện trong Hình vV S 


Message from webpage Dx 


À Số boo không nåm trong khoảng từ 50 đến 100. 


OK 


HiNH 6-3 Chạy ví dụ với hàm isNaN( ) trong câu điều kiện ghép. 


Đoạn mã hoàn chỉnh có trong Ví dụ 6-2 (xem trong file listing6-2.htm của phần 


Tài nguyên di kèm). Điều kiện phức hợp được in đậm. 


VÍ DỤ 6-2 Câu lệnh if phức hợp. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title2Suü dung Tf</title> 
</head> 
<body> 
<script type="text/javascript"> 
var inputNum = prompt("Hày nhâp môt sõ trong khoáng tü 50 
if (isNaN(inputNum) || ((inputNum > 99) || (inputNum « 51) 
alert("Số"+inputNum+" không nằm trong khoảng từ 50 
} 


</script> 

Đây là một ví dụ. 
</body> 

</html> 


Su dung câu lénh else if và else 


Vấn đề tiếp theo với đoạn mã ví du là hộp thoai thông báo trong Hình 6-3 luôn 
chỉ ra là ban đã nhập số. Điều này hiển nhiên không phải lúc nào cũng đúng - tôi 
đã nhập từ boo. Bạn cần thực hiện việc kiểm tra nhiều điều kiện riêng biệt. Bạn 
làm việc đó như thé nào? Câu trả lời là lệnh e1se if và else. 


Else if 


Hầu hết các ngón ngữ lập trình hiện dai đều có cấu trúc câu lệnh điều kiện 
if/else if/else nhưng cách sử dụng sẽ khác nhau, đặc biệt là cách viết 
chính tả hoặc cấu trúc câu lệnh e1se if. Một số ngôn ngữ định nghĩa nó là 


elsif (viết liền thành một từ và sai chính tả). Các ngôn ngữ khác dinh 
nghĩa nó là e1seif (viết liền thành một từ và đúng chính tả). Việc nhớ 
những cách viết này là một thách thức, chưa nói tới cách dùng khác nhau 
cho các loại dấu ngoặc trong các ngôn ngữ để định nghĩa đoạn mã được thực 


thi. Trong lập trinh JavaScript, bạn sé dùng else if — viết thành hai từ 
riêng biệt và đúng chính tả. 


Sử dụng e1se if và else, bạn có thé tạo ra nhiều cấp độ của điều kiện, mỗi 
điều kiện sẽ được kiểm tra lần lượt. Đoạn mã trong điều kiện đúng đầu tiên sẽ 
được thực thi. Nếu không có điều kiện nào đúng, đoạn mã trong điều kiện e1se 
(nếu có) sẽ được thực thi. Ví dụ 6-3 (file listing6-3.htm của Tài nguyên đi kèm) 
cho thấy đoạn mã kiểm tra đầu tiên xem biến 1nputNum có chứa số hay không. 
Nếu như giá tri là số, câu lệnh else if sé thực hiện việc kiểm tra để chắc chán 
giá trị đầu vào nằm trong khoáng thích hợp. Đoạn mã gọi hàm alert( ) tương 
ứng dựa trên điều kiện đúng. Nếu bạn nhập số, điều kiện e1se sẽ chay và hiển 
thị hộp thoại thông báo về số đã nhập. 


VÍ DỤ 6-3 Sử dụng điều kiện else if và e1se. 


<!DOCTYPE HTML PUBLIC "”"-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<tItle>Sử dung Tf</title> 
</head> 
<body> 
<script type="text/javascript"> 
var inputNum = prompt("Hày nhâp môt sõ trong khoáng tü 50 
if (isNaN(inputNum)) { 
alert(inputNum + " không phåi là môt sõ."); 


} 

else if ((inputNum > 99) || (inputNum < 51)) { 
alert(**"**S6ó **”**+inputNum+" không nằm trong kho 

} 


else { 


} 

</scrlpt> 

Đây là một ví dụ của Chương 6. 
</body> 

«/html» 


alert("Ban đã nhập số: " + inputNum); 


Tương tự nhu cách bạn dùng else if và else để kiểm tra nhiều điều kiện khác 
nhau, bạn có thể (đôi khi còn phải) sử dụng nhiều cấp độ của câu điều kiện. Ví 


du, ban có thé kiểm tra cho một điều kiện nào đó và khi thành công, thực thi các 
điều kiện bổ sung. Dưới đây là ví du sử dụng hàm match( ) và một biểu thức 
chính quy. Để có thêm thông tin về biểu thức chính quy, đọc lại Chương 4 “Làm 
việc với biến và kiểu dữ liệu”. 


Sử dung các câu lệnh điều kiện nhiều cấp độ và biểu thức chính quy 


1. Mở một trình soạn thảo. Nếu bạn đã làm theo những bước trước ở chương 
này, hãy mở file mà ban đã thay đối, ifexample.htm (Tài nguyên di kèm). 


Trong file sẽ có đoạn mã dưới đây. (Nếu bạn không thực hiện theo ví dụ trước, 
chỉ cần tạo một file trắng, dán vào đoạn mã dưới đây và đến bước tiếp theo). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 


<title>Sử du f«/title» 


</head> 
<body> 
«script type="text 
var inputNum - prom 
if (inputNum » 99) ( 

alert(**”**Số**“**+jnputNum+**”** không nằm 
} 


</script> 

Đây là một ví dụ của Chương 6. 
</body> 

«/html» 


1 pt"» 
nhập một số trong khoáng ` 


1. Luu file vói mót tén khác. 


2. Nhập đoạn mã được in đậm dưới đây vào file vừa mới lưu ở bước trước: Lưu 
ý những phần thay đổi so với ví dụ trước được in đậm: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 

<title>Sử dụng câu lệnh If lồng nhau «/title» 
</head> 


«body» 
«script type-"text/javascript'» 
var inputNum - prompt("Háy nháp mót só trong khoáng tü 50 
if (isNaN(inputNum)) ( 
if (inputNum.match(/mót | ha1 | ba | bốn |năm| sáu | bảy | tár 
alert(“Dù nó là một số, nó không thuc sự : 
} else { 
alert(inputNum + ^ không phái là một số.”' 
} 


} 

else if ((inputNum > 99) || (inputNum < 51)) { 
alert(“Số”+inputNum+” không năm trong khoảng từ 5( 

} 


</script> 

Đây là một ví dụ của Chương 6. 
</body> 

«/html» 


3. Kiểm tra tất cả các điều kiện. Bát đầu bằng việc vào trang từ trinh duyệt web. 
Bạn được thông báo phải nhập và 0. Trong lần kiểm thử đầu tiên, nhập 
một từ như dưới đây: 


Hãy nháp một số trong khoảng từ 50 đến 100: 


bón 


4. Nhân OK. Điều kiện if đầu khớp, sau đó điều kiện if lồng bên trong bát 


đầu được kiếm tra đầu vào. Đầu vào trùng với chuỗi "bón", kết quả được thé 
hiện ở hộp thoại dưới đây: 


Dù nó là một số, nó không thực sự là một số đối với tôi. 
[E] Không cho trang này tao các hộp thoai phụ 


5. Nhãn OK để đóng hộp thoại. Tải lại trang. Bây giờ nhập từ pizza: 


Hãy nháp một số trong khoảng từ 50 đến 100: 


pizza | 


6. Nhãn OK. Giống với lần chạy trước, điều kiện đầu tiên (sNaN( )) đúng. 
Tuy nhiên, vì câu lệnh if ở trong không khớp với từ pizza, nên mệnh đề 
e1se của câu lệnh sẽ được thực thi. Kết quả được thể hiện ở hộp thoại dưới 
đầy: 


pizza không phải là một số. 
[L] Không cho trang này tao các hộp thoai phụ 


7. Nhấn OK để đóng hộp thoại và 
dữ liệu như dưới đây: 


ø. Lần này nhập số 4 vào trường 


Hãy nháp một số trong khoäng từ 50 đến 100: 
|4 | 


8. Nhấn OK. Bây giờ điều kiện if đầu tiên không đúng nữa vi 4 là một số. Do 
đó, xét tiếp điều kiện e1se if. Vì số 4 nhỏ hơn 51, nên điều kiện e1se if 
đúng và hiển thị hộp thoại thông báo như sau: 


Số 4 không nằm trong khoáng từ 50 đến 100. 
E] Không cho trang này tao các hộp thoai phụ 


9. Một kinh nghiệm hay là bạn nên kiểm thử cả những số lớn hơn 99. Bạn hoàn 


toàn có thé làm nhu thế. Khi sẵn sàng tiếp tuc, nhấn OK để đóng hộp thoại 
và mở lại trang. Lần này, nhập một số như dưới đây: 


Hãy nhập một số trong khoáng từ 50 đến 100: 


CHE 
.0. Khi nhấn OK, bạn không nhận được hộp thoại thông báo nào, vi số 64 nằm 
trong khoảng từ 50 đến 100, vì thế không điều kiện kiểm thử nào đúng. 


Tôi đã giải thích đoạn mã bạn đang xem ở bước này và các bước trước nhưng 
vẫn chưa nói về biểu thức chính quy nằm trong câu lệnh if lồng bên trong. Câu 
lệnh đó là: 


if (inputNum. match( Zmột | ha1 | ba | bốn | năm | sáu | bảy | tám |chín |muói. 


Biểu thức chính quy được dùng với hàm (hoặc thuộc tính) match( ) của bien 
inputNum. Hàm match( ) nhận một biểu thức chính quy làm đối số. Trong 
trường hợp này, đối số là: 


/mót | ha1 | ba | bốn | năm | sáu | bảy | tám |chín |mười/ 


Biểu thức này được chặn bằng hai dấu gạch chéo (/) ở hai đầu. Sau đó, biểu 
thức chính quy tìm kiếm so khớp với mọi giá trị trong chuỗi một, hai, ba, 
bốn, năm, sáu, bảy, tám, chín hoặc mười. Ký tự gạch thăng (|) giữa 


mỗi chuỗi thé hiện một logic OR, nghĩa là biểu thức chính quy này sẽ khớp với 
bất kỳ chuỗi nào trong dãy đó nhưng không nhiều hơn một. 


Điểm thú vị là biểu thức chính quy này tuy đơn giản nhưng vẫn có lỗi. Để biểu 
thức chính quy này hoàn chỉnh hơn, bạn cần đánh dấu vị trí của chuỗi phù hợp. 
Và trong đoạn mã được viết, biểu thức sẽ khớp với chuỗi sáu mươi tương tự 
như với chuỗi sáu. 


Mục đích của tôi không phải là chỉ ra một biểu thức chính quy hoàn hảo, mà là 
để bạn làm quen với một ví dụ hoàn chỉnh để khi cần làm việc với nó, bạn sẽ 
không bỏ chạy! 


Làm việc với điều kiện ba ngôi 


Một định dạng khác của cấu trúc điều kiện là điều kiện ba ngôi (ternary 
conditional). Loại điều kiện này sử dụng dấu hỏi (2) để tạo cấu trúc 
if/else rút gọn. Cấu trúc cơ bản e 


(name == "steve") 2 "Xin c 


Câu lệnh có thể được diễn giải như sau: 
ngược lại “Xin chào người chưa quen”. 


Teu tên bằng steve, “Xin chào Steve", 


Ban có thé sử dụng biếu thức ba ngôi trong một câu lệnh, nhu ví du dưới đây 
(xem trong file ternary.txt của phần Tài nguyên đi kèm): 


var greeting = (name == "steve") 2 "Xin chào Steve" : "Xin c 
alert(greeting); 


Đoạn mã thiết lập bien greeting với kết quả của phép kiểm tra ba ngôi. Nếu 
giá trị từ biến name là “Steve”, biến greeting sẽ nhận được chuỗi giá trị “Xin 
chào Steve"; nếu không, biến greeting nhận được chuỗi giá trị “Xin chào 
người chưa quen”: Đây là đoạn mã viết theo hình thức if/else truyền thống: 


(name == "steve") { 

var greeting = "Xin chào Steve" 
7 
else { 


var greeting = **”**Xin chào người chưa quen**”**; 


alert(greeting); 


Cấu trúc ba ngôi đôi khi gây nhầm lẫn nếu ban chưa từng sử dụng nó. Ban vẫn 
có thể viết theo cú pháp if/esle truyền thống nếu nhờ thế, chương trình của 
bạn dễ đọc hơn - đặc biệt nếu người đọc mã không biết kiếu cấu trúc ba ngôi 
này. 


Kiểm tra với switch 


Câu lệnh switch là cách dễ dàng và hiệu quả dé kiếm tra một biến với nhiều giá 
trị và thực thi đoạn mã dựa trên trường hợp trùng khớp. Mặc dù bạn cũng có thể 
thực hiện nhiệm vu này bằng cách sử dụng câu lệnh if/else if, nhưng làm 
như vậy sẽ khiến đoạn mã dài hơn. Trong trường hợp này, câu lệnh switch sẽ 
hữu dụng hơn. 


Xem xét ví dụ về một trang web cầ 
mà người dùng chọn. Với bài tập n 
ngữ của họ qua một form. (Chương 
với trình duyệt” sẽ giải thích cách xác 
của người dùng). 


đoạn mã nào đó dựa trên ngón ngữ 
rằng người dùng đã chọn ngôn 
kiện trong JavaScript và làm việc 
ngón ngữ mặc dinh trong trình duyệt 


Nếu trang này cần thực thi đoạn mã với nhiều ngôn ngữ, chúng ta có thể dùng 
một tập hợp các câu lệnh điều kiện if/else if/else. Giả sử ta có một biến là 
languageChoice (tùy chon ngón ngữ) với giá tri của ngón ngữ được chon, 
đoạn mã có dạng như sau: 


if (languageChoice -- "en") ( 
// Ngón ngü là tiéng Anh, thuc thi doan má cho tiéng 


else if (languageChoice == "'"de") { 
// Ngón ngü là tiéng Büc, thuc thi doan má cho tiéng 


else if (languageChoice -- "pt") 
// Ngón ngü là tiéng BÓ Bào Nha, thuc thi doan má ch: 
// tiếng Bồ Đào Nha. 

} 

else { 
// Ngôn ngữ không được chọn, sử dụng tiếng Thụy Điển 


j 


Đoạn mã này chạy tốt khi có một vài ngón ngữ được chon, nhưng ban hãy thử 
tưởng tượng tình huống có nhiều hơn hai mươi ngôn ngữ được chọn. Khi đó, 
việc viết mã để thực thi cho mỗi điều kiện sẽ nhanh chóng bị rối. Đây là đoạn mã 
tương tự với switch (Ban có thể thấy đoạn mã này trong file switches.txt của 
phần Tài nguyên đi kèm): 


switch(languageChoice) { 


case "en": 
// Ngón ngü là tiéng Anh, thuc thi doan má c 
break; 

case "de": 
// Ngón ngü là tiéng Büc, thuc thi doan má c 
break; 

case "pt": 


// Ngón ngü là tiéng BÓ Bào Nha, thuc thi do: 

// cho tiéng BÓ Bào Nha. 

break; 
default: 

// Bia dié 


ược chon, sử dụng tiếng TI 


// Chuyển đến đoạn âu lệnh switch. 


Câu lệnh switch tìm kiếm từng trường hợp ngôn ngữ và thực thi đoạn mã cho 
trường hợp đó. Câu lệnh break cho biết khối lệnh switch sẽ ngắt sau khi thuc 
thi trường hợp trùng khớp. Câu lệnh break khiến toàn bộ phần còn lại của cầu 
lệnh switch bị bỏ qua và đoạn mã tiếp tuc thực thi sau dấu ngoặc đóng của câu 
lệnh switch. 


Ví dụ, nếu biến TanguageChoice có giá trị là de và thiếu câu lệnh break, 
đoạn mã cho tiếng Đức sẽ được thực thi, nhưng câu lệnh switch vẫn tiếp tục 
chạy đoạn mã còn lại để kiểm tra các ngôn ngữ khác cho đến khi gặp câu lệnh 
break hoặc thuc thi đến cuối câu lệnh switch. 


Bạn nên dùng câu lệnh break với mỗi case (trường hợp) trong khối lệnh 
switch. Tuy nhiên, tiện ích của câu lệnh switch được thể hiện rõ khi có nhiều 
trường hợp cần thực thi cùng một đoạn mã. Hãy xem một ví dụ, trong đó người 
truy cập chọn nước hoặc vùng mà họ lưu trú. Trên những trang như thế, người 
truy cập từ Mỹ, Úc và Vương quốc Anh sẽ muốn trang được hiển thị bằng tiếng 
Anh, dù người từ những nước đó viết (phát âm) nhiều từ khác nhau. Sau đây là 


một ví dụ sử dung câu lệnh switch cho tình huống này (xem trong file 
switches.txt của Tài nguyên đi kèm): 


switch(countryChoice) { 

case "US": 

case "Australia": 

case "Great Britain": 
// Ngôn ngữ là tiếng Anh, thực thi đoạn má c 
break; 

case "Germany": 
// Ngón ngü là tiéng Büc, thuc thi doan má c 
break; 

case "Portugal": 
// Ngôn ngữ là tiếng Bồ Đào Nha, thực thi đo: 
// cho tiếng Bồ Đào Nha. 
break; 

default: 
// Địa điểm không được chọn, sử dụng tiếng T 


// Chuyển đến đoạn mã sau cà 


Chú ý Tốt hơn hết là bạn nên để xười dù s thuộc bất kỳ quốc gia nào cũng 
có thé chon ngôn ngữ mà trang web , ví dụ như tiếng Pháp. Trong ví 

dụ này, bạn có thể bỏ qua chức năng đó, nhưng hãy ghi nhớ khi bạn thiết kế 
trang web của mình. 


Nếu người dùng chọn quốc gia là Australia, trường hợp (case) Australia sẽ 
trùng khớp, do đó đoạn mã cho tiếng Anh sẽ được thực thi. Tới câu lệnh break, 
JavaScript sẽ nhảy ra khỏi khối lệnh switch đang thực thi và chi thực thi dòng 
đầu tiên của đoạn mã sau câu lệnh switch. 


Vòng lặp while 


Câu lệnh while tạo một vòng lặp, trong đó đoạn mã được thực thi chừng nào 
điều kiện đúng. Phần này trinh bày câu lệnh while và câu lệnh do. . . while. 


Câu lệnh while 


Vòng lặp while thực thi đoạn mã nàm trong dấu ngoặc chừng nào điều kiện còn 
đúng. Xem ví dụ dưới đây (đoạn mã này nằm trong file while.txt của Tài nguyên 
đi kèm): 


var count = 0; 

while (count < 10) { 
// Viết mã ở đây 
// Nhiều dòng mã cũng được 
// Đừng quên tăng biến đếm. 
count-*; 


j 


Luôn ghi nhớ hai khía cạnh sau của vòng lặp while: 


= _ Có thể đoạn mã nằm trong câu lệnh while không bao giờ được thực thi, 
dựa trên giá trị bắt đầu của biến hoặc điều kiện được kiểm tra. 


= — Điều kiện được kiểm tra bởi 
vòng lặp. 


11e phải được thay đổi trong 


Đảm bảo đoạn mã được thực thi ít ột lần 

Trong đoạn mã ví dụ trước, biến count được khói tạo với giá tri 09. Câu lệnh 
while sẽ chạy như sau: Câu lệnh while sẽ đánh giá giá trị của biến count để 
kiểm tra xem nó có nhỏ hơn 10 hay không. Nhờ thế, đoạn mã trong ngoặc được 
thực thi. (Tuy nhiên, nếu giá trị của biến count không nhỏ hơn 10, đoạn mã 
trong ngoặc của vòng lặp while không bao giờ được thực thi - dù chỉ một lần). 


Trong JavaScript, vòng lặp do. . . while thực thi đoạn mã một lần, bất kể điều 
kiện ban đầu là gì. Chúng ta sé bàn về vòng lặp do. . . while ở phần sau của 
chương. 


Thay đổi điều kiện 


Nhu đã trình bày, câu lệnh while trong ví dụ kiểm tra xem biến có nhỏ hơn 10 
hay không. Nếu biến count nhỏ hơn 10, đoạn mã trong vòng lặp while sẽ được 
thực thi. 


Có một dòng mã trong vòng lặp while sử dụng toán tử một ngôi ++ để tăng giá 


tri cüa bién dém count: 
count++; 


Khi đoạn mã trong câu lệnh while chay xong, việc kiểm tra được thực hiện lại. 
Nếu không có đoạn mã làm tăng giá trị của biến count, count luôn nhỏ hơn 10 
sẽ dẫn đến một vòng lặp vô hạn — đây không phải là điều chúng ta muốn. 


Mách nhỏ Khi sử dụng một biến đếm, như trong ví dụ trên, việc tăng biến 
đó có thể được thực hiện bên trong cặp ngoặc nhọn của câu lệnh while 


hoặc trong chính điều kiện của câu lệnh while. Đây là một ví dụ: while 
(i++ < 10). Xem lại Chương 5 để hiểu rõ hơn về toán tử chèn sau. 


Bài học rút ra là bạn phải chắc chắn sẽ tăng hoặc thay đổi bất cứ điều kiện gì mà 
ban sử dung trong cầu lệnh while. 


Câu lệnh do...whil 


Không như câu lệnh while, câu lệ 
dấu ngoặc ít nhất một lần. Câu lén hé được diễn giải nhu sau: "Khi 
điều kiện đúng, chạy đoạn mã này”. ác, câu lệnh do. . . while được diễn 
giải như sau: Thực thi đoạn mã này cho đến khi điều kiện còn đúng. Xem đoạn 
mã dưới đầy (trong file dowhile.htm của Tài nguyên di kèm): 


ile thực thi đoạn mã nằm trong 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Sử dụng vòng lặp Do While</title> 
</head> 
<body> 
«script type-"text/javascript'» 
var count - 0; 
do ( 
alert("Bién đếm count bằng " + count); 
count++; 


wh1le (count < 3); 
</script> 


</body> 
</html> 


Khi thuc thi doan má này, ba hóp thoai xuât hiên. Trong lân chay dàu tiên, bien 
count có giá trị © bởi vi đó vẫn là giá tri ban đầu và hộp thoại sé hiên thi như 
Hình 6-4. 


Message from webpage I 


A Biến dëm count bằng 0 


` 
HÌNH 6-4 Biến count có giá trị 0 trong lần thực thi đầu tiên. 


Sau khi chạy một lần, biến count được tăng lên. Khi kiểm tra tiếp câu lệnh 
wh11e, biến count vẫn nhỏ hơn 3, vì thế đoạn mã tiếp tục được thực thi, kết quả 
hiển thị ở hộp thoại như Hình 6-5. 


Message from webpage is] 


A Biến đếm count bång 1 


HINH 6-5 Khi chay, đoạn mã tăng biến đếm và cho ra kết quả của làn thực thi tiếp theo. 


Quá trình tương tự lặp lại. Biến co 
tục được kiểm tra. Giá trị của biến 
trong ngoặc tiếp tục chạy, hiển thị hệ 


ng lên và điều kiện while tiếp 
còn nhỏ hơn 3, vì thế đoạn mã 
hác như Hình 6-6. 


Message from webpage kl 


A Biến đếm count bång 2 


e cho đến khi ban quen và hiểu 


k 3 
HINH 6-6 Biến count sau lần chạy khác 


Thực hành với câu lệnh while và 
được sự khác biệt giữa hai cầu lén 


Sử dụng vòng lặp for 


Vòng lặp for thường được dùng tương tự như vòng lặp while để thực thi một 
đoạn mã lặp lại một số lần nhất định. Trong JavaScript, vòng lặp for có hai 
dạng: vòng lặp for. . . in và vòng lặp for each. . . 1n. Phần này sẽ giải thích 
cả hai loại vòng lặp trên. 


Vòng lặp for 
Chúng ta sử dụng vòng lặp for để tạo một vòng lặp trong đó điều kiện được 
khởi tạo, đánh giá và thay đổi trong một cấu trúc ngắn gọn. Dưới đây là ví dụ: 


for (var count = 0; count < 10; count++) { 
// Thực thi đoạn mã dưới đây 


} 


Câu lệnh for có ba mệnh đề trong ngoặc đơn. Mệnh đề đầu tiên thiết lập biểu 
thức ban đầu như trong ví dụ trên và cả ví dụ dưới đây: 


var count = 0; 


Mệnh đề tiếp theo của câu lệnh for chỉ định biểu thức kiểm tra, thể hiện bởi 
đoạn mã sau: 


count < 10; 


Biểu thức cuối cùng thường dùng để tăng biến đếm sử dụng cho việc kiểm tra. 
Trong đoạn mã ví dụ, biểu thức này là mệnh đề cuối trong ngoặc đơn: 


count++ 


Chú ýBiểu thức cuối cùng trong cấu trúc của vòng lặp for không có dấu 
chấm phẩy. 


Dưới đây là ví dụ sử dụng vòng lặp 
Sử dụng vòng lặp ƒor với mảng 


1. Sử dụng Visual Studio, Eclipse, hoặc một trình soạn thảo khác, thay đổi đoạn 
mã trong file forloop.htm của thư mục mã nguồn mẫu Chương 6, phần Tài 
nguyên đi kèm. 


2. Trong trang này, thay dòng chú thích TODO bằng đoạn mã in đậm dưới đây 
(bạn có thể tìm thấy đoạn mã này trong file forloop.txt của thư mục Chương 
6, Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ví du về vòng lặp For</title> 
</head> 
<body> 
«script type-"text/javascript'» 


var myArray = ["Vega","Deneb", "Altair"]; 

var arrayLength - myArray.length; 

for (var count = 0; count < arrayLength; count++r ) { 
alert(myArray [count]); 

} 


</script> 
</body> 
</html> 


. Lưu trang này và dùng trình duyệt mở lai. Bạn nhận được ba hộp thoại thông 
báo liên tiếp nhau: 


Message from webp... — ¿š—| 


Có thể thấy từ những hộp thoai này, đoạn mã chạy lặp lại với mỗi giá tri trong 


mảng myArray. Tôi muốn phân tích rõ một số đoạn mã trong ví dụ này. Ở 
Chương 4, bạn đã được học về cách tạo mảng và biết rằng mảng trong 
JavaScript được đánh chỉ số bằng số nguyên bắt đầu từ 0. (Sau đây, bạn sẽ có 
điều kiện áp dụng những kiến thức này). Đây là dòng tương ứng trong ví dụ 
trước: 


var myArray = ["Vega","Deneb", "Altair"]; 


Đoạn mã tao ra một biến là arrayLength và thiết lập giá tri độ dài của mảng. 
Cách lấy độ dài của mảng myArray minh họa cho cách dùng thuộc tính 1ength. 
(Tôi sẽ giải thích chi tiết hơn về các đối tượng trong Chương 8 "Các đối tượng 
trong JavaScript"). Lấy độ dài trong một biến riêng (trong đoạn mã trên đây là 
arrayLength) thay vì sử dụng thuộc tính 1ength trong vòng lặp for giúp tăng 
tốc độ thực thi chương trình. 


var arrayLength = myArray.length; 


Đâu tiên vòng lặp for tao và đặt giá tri cho bién count, sau đó kiểm tra xem 
liệu biến count có nhỏ hơn độ dài của mảng myAr ray hay không (độ dài này 
được lưu trong biến arrayLength ig, nó tăng giá trị của biến count. 
Đoạn mã trong nội dung của vòng thị một hộp thoại thông báo, sử 
dụng biến count để duyệt qua từng a mảng myAr ray. Dưới dày là 
đoạn mã: 


for (var count = 0; count < arrayLength; count++r ) { 
alert(myArray[count]); 


Vòng lặp for...in 
Vòng lặp for..in duyệt qua các thuộc tính của một đối tượng, trả về tên của 
chính các thuộc tính đó. Dưới đây là ví dụ: 
for (var myProp in myObject) { 
alert(myProp + " = " + myObject[myProp]); 
} 


Trong đoạn mã này, biến myProp thiết lập một thuộc tính mới cho myObject 
mỗi khi thực thi vòng lặp. Dưới đây là ví dụ hoàn chỉnh hơn. 


Sử dung vòng lặp for...in 


1. Dùng Visual Studio, Eclipse hoặc một trình soạn thảo khác thay đối file 
forinloop.htm trong thư mục mã nguồn mẫu Chương 6 của Tài nguyên đi 
kém. 


2. Trong trang này, thay dòng chú thích TODO báng đoạn mã in đậm dưới đây 
(đoạn mã này cũng nằm trong file forinloop.txt của phần Tài nguyên đi 
kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 
<title>Ví dụ về vòng lặp For..Inc/title» 

</head> 

<body> 

«script type-"text/javascript'» 
var star - new Object; 
star.name - "Po 
star.type - "Do 
star.constellat 
for (var starPrö 

alert(starP 

} 


</script> 
</body> 
</html> 


eid”; 
sa Minor”; //constellatior 


op * " =“ + star[starProp]); 


3. Luu và dùng trình duyệt mở trang. Bạn nhận được ba hộp thoai thông báo 
sau: 


Message from webpage — ¿4¬ 


A constellation = Ursa Minor 


của thuộc tính, trái lai khi sử 
ig star sẽ cho ra giá trị của thuộc 


Trong đoạn mã ví dụ, biến starP 
dung starProp dưới dạng chỉ số c 
tính đó. 


Mách nhỏ Đôi khi, bạn sẽ thấy vòng lặp for...in được dùng để duyệt một 
mảng như trong ví dụ ở phần trước. Tuy nhiên việc dùng for...1n để duyệt 
mảng có thể dẫn tới nhiều kết quả lẫn lộn. Một trong những vấn đề dễ thấy 


nhất của phương thức này là vòng lặp for...1n không trả về các thuộc tính 
theo thứ tự có định nào. Đây có thể là vấn đề, đặc biệt khi bạn muốn dùng 
JavaScript để làm hiển thị chữ trên một trang web. Vì vậy, khi bạn muốn 
duyệt một mảng đơn giản bằng vòng lặp, hãy sử dụng vòng lặp for thay vì 
vòng lặp for...1n. 


Vòng lặp for each...in 


Một cấu trúc mới trong JavaScript là vòng lặp for each. ..in. Vì cấu trúc này 
mới nên vẫn chưa được hỗ trợ trong tất cả các trình duyệt — đặc biệt nó không 
được hỗ trợ trong IE8 và các phiên bản cũ hơn. Tuy nhiên, nó được hỗ trợ trong 


Firefox 2.0 và các phiên bản mới hon. 


Cấu trúc for...in trả về tên của thuộc tính, còn vòng lặp for each. ..in trả về 
giá trị của thuộc tính. Về cơ bản, cú pháp của cả hai giống nhau, vòng lặp for 
each.. . in chỉ thêm từ each: 


for each (var myValue in myObject) { 
alert(myValue " nám trong dói tuong."); 
} 


Thay thế vòng lặp for... . 1n từ ví dụ trước bằng vòng lặp for each. .. . 1n, kết 
quả sẽ là đoạn mã in đậm dưới đây: (File đã chỉnh sửa là foreach.htm của phần 
Tài nguyên đi kèm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ví du vé vòng lặp For Each In«c/title» 


</head> 
<body> 
<script type="text 
var star 
star.name 
star.type - "Double/Cepheid"; 
star.constellation - "Ursa Minor"; 


for each (var starValue in star) 1 
alert(starValue + “ năm trong đối tu 
} 


</script> 
</body> 
</html> 


Khi ban xem trang web báng Internet Explorer, ban sè nhân đwgc hóp thoai báo 
lỗi (hoặc chỉ nhận được một màn hinh tráng). Tuy nhiên, nếu xem trang này 
bằng FireFox 3.0, đoạn mã sẽ thực thi đúng. Hình 6-7 hiển thị một trong ba hộp 
thoại. 


Message from webpage eil 


A Polaris năm trong đổi tượng star. 


HÌNH 6-7 Duyệt đối tượng sử dung vò in. 


Có thể, ban chưa muốn dùng cấu t 
không được hỗ trợ trong các phiên b 
biến) của Internet Explorer. 


lặp for each.... in bởi vì nó 
ng là phiên bản vẫn được dùng phổ 


Kiểm tra tính hợp lệ của form với 
các lệnh điều kiện 


Ó các phần trước, chúng ta dùng hàm prompt ( ) để lấy thông tin từ người dùng. 
Hàm prompt ( ) ít được dùng và nhanh chóng lỗi thời vì bị chặn bởi Internet 
Explorer 7. Phần này trình bày qua việc sử dụng các web form với JavaScript. 
Toàn bộ Chương 14 "Sử dụng JavaScript với Web Form” sẽ thảo luận đề tài này. 


Việc sử dung điều kiện if e1se.... if else để kiểm tra tính hợp lệ của dữ liệu 
đầu vào khá phổ biến, vì thế chúng ta hãy thử làm bài tập sau. 


Kiểm tra tính hợp lệ của dữ liệu đầu vào với câu lệnh điều kiện 


1. Sử dung Visual Studio, Eclipse hoặc một trinh soạn thảo văn bản khác tao 
một trang web. Đặt tên cho file này là: form1example.htm. 


2. Trong trang này, nhập đoạn mã sau và thêm đoạn mã in đậm dưới đầy thay 
cho dòng chú thích TO DO (xem trong file form1example.txt của phần Tài 
nguyên di kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Form don giản</title> 
«script type-"text/javascript'» 
function alertName() ( 
var name = document.forms[0].nametext.valti 
if (name -- "steve") ( 
alert(“Xin chào Steve. Chào mừng ‹ 
i 


else if 


mE “nancy”) 1 
in chào Tim."); 


else ( 


} 


return true; 
) //Két thúc hàm** 
</script> 


alert(“Xin chào “ + name); 


</head> 
<body> 
<form id="myform" action="#" onsubmit="return alertName(), 


<p>Username: «input id-"nametext" name="username" type="”t‹ 
<p><input type="submit" /> </p> 

</form> 

</body> 

</html> 


3. Luu trang này và dùng trình duyệt web để mở lại. Ban sẽ thấy một trang như 
sau: 


me EHI) 
( =>) ( >) £) http://localhost/ex JO ~ > X |e Form cơ bản | | tn) lí TE 


Username: 


Submit Query 


4. Trong form, nhập tên steve, không dùng dấu ngoặc kép và chỉ sử dung ký tự 
thường.vNhãn Submit Query (Gửi yêu cầu) và ban sẽ nhận được một hộp 
thoại như sau: 


Message from webpage | 


À Xin chào Steve. Chào mừng đến với Machine. 


k 


5. Nhãn OK và nhập tên nancy, không có dấu ngoặc kép và bằng ký tự thường. 
Nhấn Submit Query, bạn sẽ nhận được một hộp thoại như sau: 


" 


Message from webpage I 


A Xin chào Tim. 


N —ÉÁ— BM! 


Trong trường hợp ban còn thắc mắc, nickname của Tim là Nancy, vi thé 
thóng báo trong hóp thoai là có n iều này cũng đúng với đoạn mã 
trong ví dụ. 


6. Nhãn OK để đóng hộp thoại. 
Query. Bạn sẽ nhận được hộp thoạ 


Message from webpage -— 


khác và nhấn vào button Submit 


A Xin chào người chua quen. 


7. Nhấn OK để đóng hộp thoại. 


Ban đã tạo một form cơ bản cho web, truy cập form đó bằng JavaScript, và dùng 
câu lệnh điều kiện để thực hiện thao tác dựa trên dữ liệu đầu vào của người 
dùng. Đừng lo lắng nếu cách dùng trong ví dụ này không dễ hiểu. Mục đích 
chính của ví dụ này là đưa ra một vài trường hợp áp dụng câu lệnh điều kiện bạn 
đã học ở chương này. 


Chương 7 “Làm việc với hàm” sẽ giải thích cách sử dụng hàm trong JavaScript. 
Ví dụ đầu tiên trong Chương 14 sẽ cho thấy cách viết một đoạn mã JavaScript 
kiểm tra tính hợp lệ để bảo đảm các trường bắt buộc được điền đầy đủ. 


Bài tập 


1. Sử dụng hàm prompt ( ) dé lấy thông tin tên của một người. Sử dụng câu 
lệnh switch để thực thi hộp thoai hiển thị câu “Chào mừng <tên nhập 
vào>” nếu tên nhập vào là tên củ ¡ đi” nếu tên nhập vào là Steve, 
và “Vui lòng trở lại sau, <tên ” cho toàn bộ các trường hợp 
khác 


2. Sử dung hàm prompt ( ) để lẫy thông tin nhiệt độ hiện tại được nhập bởi 
người truy cập. Nếu nhiệt độ nhập vào trên 100, yêu cầu người dùng giảm 
nhiệt độ. Nếu nhiệt độ dưới 20, yêu cầu người dùng tăng nhiệt độ. 


3. Sử dụng câu lệnh ba ngôi để hoàn thành nhiệm vụ ở Bài tập 2. 


4. Sử dụng vòng lặp for để đếm từ 1 đến 100. Khi số là 99, hiến thị hộp thoại 
thông báo. 


5. Sử dụng vòng lặp while để hoàn thành nhiệm vụ tương tự ở Bài tập 4. 


Chuong 7 
Làm việc với hàm 
Sau khi doc xong chương này, bạn có the: 


» Hiểu được mục đích sử dung hàm trong JavaScript. 
» Tự định nghĩa hàm. 
= Gọi hàm và nhận dữ liệu trả về. 


4 Nắm được cách sử dụng một số hàm có sẵn trong JavaScript. 


Hàm là gì2 


Hàm trong JavaScript là tập hợp cá E hàm có thé có tén hoác khóng (vó 
danh), và có thé được goi từ bất kỳ đã một chương trình JavaScript. Hàm 
có thể nhận vào các đối số, đây là những giá trị đầu vào được truyền vào hàm. 
Trong thân hàm, các đối số sẽ được thao tác và kết quả sẽ được trả về tại vị trí 
hàm được gọi thông qua giá trị trả vé. 


Hàm là lựa chọn hoàn hảo khi đoạn mã lặp lại nhiều lần trong chương trình. 
Thay vì viết lại đoạn mã đó, bạn dùng hàm (có thể hiểu là một chương trình con 
bên trong chương trình) để thay thế. Thậm chí khi bạn có những đoạn mã rất 
giống nhau — dù không giống hoàn toàn — trong suốt chương trinh, bạn vẫn có 
thể khái quát hóa chúng thành một hàm. 


Sử dụng hàm để kiểm tra các trường bắt buộc phải điền vào form là một ví dụ 
cho việc khái quát hóa những đoạn mã tương tự nhau. Bạn có thể viết mã 
JavaScript để kiểm tra cho từng trường trong form hoặc sử dụng hàm. Chương 
14 “Sử dụng JavaScript với Web Form” đưa ra ví dụ xây dựng một hàm cụ thể 
và sau đó khái quát hóa nó. 


Qua các ví dụ của những chương trước, bạn đã làm quen với hoạt động của hàm. 
Một hàm được định nghĩa bằng từ khóa funct ion, theo sau là tên hàm và cặp 


ngoặc don chứa danh sách các tham số. Chúng ta dùng cáp ngoặc nhọn để giới 
hạn các câu lệnh được thực thi trong phạm vi của hàm: 


function tenHam() { 
⁄/ Viết mã cho hàm ở đây 


} 


Mách nhỏ Cần lưu ý rằng khi hàm được định nghĩa (ban có thể thấy điều 


này trong định nghĩa hàm cơ bản ở phần trước), đoạn mã sẽ chưa được chạy 
cho đến khi hàm được gọi. Cách gọi hàm sẽ được trinh bày chi tiết ở phần 
sau của chương này. 


Đối số của hàm 
Đối số truyền vào hàm được đặt trong cặp ngoặc đơn của định nghĩa hàm. Dưới 
đây là ví dụ về cách dùng đối số: 


function myFunct1on(do1So 


} 


Ví dụ tiếp theo có hai đối số: 


., doiSoN) { 


function myFunction(doiSo1, doiSo2) { 
// Viết mã ở đây 
J 


Thao tác gọi hàm đơn giản nhu sau: 
myFunction(vali,val2); 


Một trong những điểm khác biệt giữa JavaScript (theo chuẩn ECMA-262) và các 
ngôn ngữ khác là trong JavaScript bạn không cần chỉ ra số lượng đối số truyền 
vào hàm, và số lượng đối số được truyền vào không bắt buộc phải khớp với danh 
sách đối số đã định nghĩa của hàm. Khi được gọi, hàm nhận vào một đối tượng 
(hoạt động như một mảng) có tên là arguments. Arguments chứa các đối số đã 
truyền vào hàm, giúp bạn biết số lượng đối số được truyền vào. Sau đây là ví dụ 
minh họa cách thức hoạt động của đối số (bạn có thể tìm thấy đoạn mã này trong 
file functionbasics.txt của phần Tài nguyên đi kèm): 


function myFunction() ( 
var firstArg = arguments[0]; 
var secondArg - arguments[1]; 


j 


Cách tốt hon là bạn lẫy ra độ dài của đối tượng arguments và chạy vòng lặp 
qua từng đối số như sau (đoạn mã này cũng có trong file functionbasics.txt): 


function myFunction() { 
//truy xuất độ dài của đối tuong arguments 
var argLength = arguments. length; 
for (Var 1 = 0; 1 < argLength; 1++) { 
⁄/ Xử lý từng đối số (i) 
} 
} 


Sau đây là ví dụ hoàn chỉnh hơn minh họa tác dụng của việc sử dụng đối tượng 
arguments 
(đoạn mã có trong file functionexample.htm): 


HTML 4.01//EN" 
.dtd”> 


<!DOCTYPE HTML PUBLIC "-// 
"http: //www.w3.org/TR/htm 
«html» 
«head» 

<title>Mảng đối số</t1tle> 
</head> 
<body> 
«script type-"text/javascript'» 
function myFunction() { 


var firstArg = arguments[0]; // Đối số thứ i 
var secondArg =  arguments[l]; // Đối số th 
alert("Đối số thứ nhất là: " + firstArg); 
alert("Đối số thứ hai là: " + secondArg); 

} 

myFunction("hello","world"); 

</script> 

</body> 

</html> 


Khi đoạn mã chay, hai hộp thoại thông báo sé xuất hiện, nhu minh hoa trong 
Hinh 7-1 và 7-2. 


Message from webpage 


A Đối số thứ nhất là: hello 


————————— 


HÌNH 7-1 Dùng đối tượng "arguments" p để truy xuất đối số thứ nhất. 


Message from webpage 


A Đối số thứ hai là: world 


HÌNH 7-2 Dùng đối tượng `arguments` trong hàm dé truy xuất đối số thứ hai. 


m- 


Sử dung đối tượng arguments theo cách này, ban có thé truy xuất bất cứ đối số 


nào, chứ không chi hai đối số kể trên. 


^ = - > L9 d 

On lai pham vi cua bién 
Đối số của hàm thường là tên biến và chúng ta không nên đặt tên đối số giống 
tên biến của lời gọi hàm. Tôi chủ định dùng từ “không nên” thay cho “không 
được” vì bạn có thể sử dụng cùng một tên cho biến trong hàm và biến ở lời gọi 
hàm, nhưng làm như vậy có thể gây nhầm lẫn trong đoạn mã và phạm vi của 
biến. 


Chương 4 “Làm việc với biến và kiểu dữ liệu” có một phần nói về phạm vi của 
biến, bao gồm một bài tập về phạm vi biến trong và ngoài hàm. Sau đây là đoạn 
mã từ ví dụ về phạm vi biến trong Chương 4 (và được lặp lại trong file 
scopingrevisit.txt của phần Tài nguyên đi kèm): 


<head> 
<title>Ví dụ về phạm vi biến</title> 
«script type="text/J cript"”> 
var aNewVariable = am vi toàn cuc."; 
function doSomethi ingBits) ( 
alert("Bié Jc bên trong hàm: " + aNew 
alert("Bién OQ bên trong hàm: " + incomi 
} 
</script> 
</head> 
<body> 


<script type="text/javascript"> 
doSomething("có pham vi cuc bĝ."); 


alert("Bién toàn cục bên ngoài hàm: " + aNewVariable 
alert("Bién cuc bó bên ngoài hàm: " + incomingBits); 
</script> 


</body> 


Ví du này cho thấy ban có thể khai báo và xác dinh pham vi biến toàn cục và cuc 
bộ bên trong và ngoài một hàm. Tuy nhiên, ví dụ này giữ cho các biến tách biệt 
về logic ở điểm đoạn mã không dùng cùng tên cho biến và sau đó chi thay đổi 
giá trị biến. Tiếp theo là ví dụ trong đó việc dùng cùng tên biến gây ra sự nhầm 
lẫn. Đây là đoạn mã tôi viết nhiều năm trước và nó đủ rắc rối dù không có các 
vấn đề về pham vi, vì vậy tránh viết như sau: 


function addNumbers() { 
firstNum - 4; 
secondNum - 8; 
result = firstNum + secondNum; 
return result; 


result = 90; 
sum = addNumbers(); 


Có lé ban đã nhìn ra vấn đề trong đoạn mã này. Đoạn mã thiếu từ khóa var. Dù 
đoạn mã có khởi tạo biến result với giá tri © bên ngoài hàm, biến này lại được 
thay đổi sau lời goi hàm addNumber ( ). Hàm addNumber ( ) thay đối giá trị 
biến result thành 12, kết quả của phép cộng 4 và 8 bên trong hàm. 


Nếu bạn thêm dòng lệnh alert để hiển thi giá trị biến result ngay sau khi 
khởi tạo, hộp thoại sé cho ra kết quả 0. Và nếu bạn thêm một lệnh alert khác 
để hiển thị giá trị biến result sau khi goi hàm addNumber s ( ), thông báo sẽ 
hiển thị là 12. Việc thêm các lệnh alert vào đúng vi trí sẽ được thực hiện trong 
bài tập ở phần sau. 


Tóm lại, mọi thứ sẽ suồn sẻ hơn k tên khác nhau cho các biến ở bên 
trong và ngoài hàm và luôn sử dụn ar để khởi tạo các biến. Tùy thuộc 
vào đoạn mã bên trong hàm, hàm có thé oặc không có giá trị trả về. Giá trị 


trả về được chuyển lại cho nơi gọi hàm như bạn sẽ thấy ở phần tiếp theo. 


= g = ? A 
Già tri trå ve 
Khi hàm kết thúc quá trinh thực thi, nó có thể trả về giá trị cho nơi goi hàm bằng 
cách sử dung từ khóa return. Hãy xem xét Ví dụ 7-1 (ví dụ này có trong file 
listing7-1.txt của Tài nguyên đi kèm). 


Ví dụ 7-1 Ví dụ về giá trị trả về đơn giản. 


function multiplyNums(x) { 
return x * 2; 


var theNumber - 10; 
var result = mult1plyNums ( theNumber ) ; 
alert(result); 


Ví du 7-1 tạo một hàm có tên mu1tiplyNums với giá trị đầu vào được gán cho 
biến x. Hàm có chức năng: trả về giá trị gấp đôi của đối số: 


function multiplyNums(x) { 
return x * 2; 
I 


Sau đó, biến theNumber được khởi tao: 


var theNumber = 10; 


Tiếp theo, một biến nữa có tên result được tạo. Biến này lưu kết quả của lời 
gọi hàm multiplyNums. Hàm mu 1t 1p1yNum sử dung biến theNumber với vai 
trò đối số. 


var result = multiplyNums(theNumber); 


Khi chạy, đoạn mã hiến thị hộp thông báo như trong Hình 7-3. 
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Hình 7-3 Hộp thoại thông báo hiển thị giá trị trả về từ lời gọi hàm. 


Bạn có thể trả về giá trị từ bất cứ vị trí nào trong hàm chứ không chỉ ở cuối hàm. 
Sử dụng lệnh return trong khối lệnh điều kiện hoặc sau vòng lặp là cách làm 


phổ biến, ví du như sau (ban có thé tìm thấy đoạn mã này trong file 
morereturnexamples.txt của Tài nguyên di kèm): 


function myFunction(x) { 
if (x = 1) { 
return true; 
) else ( 
return false; 


j 


Tuy vậy, bạn cần chú ý vi trí đặt lệnh return, vì khi gặp lệnh return, hàm sẽ 
trả lại giá trị và không thực thi những dòng mã sau đó. Ví dụ, đoạn mã như sau 
(bạn có thể tìm thấy đoạn mã này trong file morereturnexamples.txt) sẽ không 
thực thi như ý định của bạn: 


function myFunction() { 
var count - 0; 
var firstNum - 48; 
return; 
var secondNum - 109; 


d 
Đoạn mã này sẽ không bao giờ kh econdNum. 
^? ` Pd = ` 
Bô sung vé thao tác gọi hàm 
Ban sé luôn gọi hàm với một vài đối số hoặc chỉ với cáp ngoặc trống nhu sau: 
var result - orderFruit(); 
Nếu hàm đòi hỏi phái có đối số, lời goi hàm sé như sau: 
var result = orderFruit(type,quantity); 


Bỏ qua cáp ngoặc đơn khi gọi hàm có thé gây ra những kết quả hoàn toàn khác 
so với ý dinh của ban. Việc goi hàm không có cáp ngoặc don sé trả lại tên của 
hàm, thay vi giá trị trả về của hàm. Hơn nữa, hàm đó sẽ không được thực thi. 


Sau đây là một ví dụ. Ví dụ 7-2 minh họa một đoạn mã JavaScript cơ bản (bạn 
có tìm thấy trong file listing7-2.htm của phần Tài nguyên đi kèm). 


Ví dụ 7-2 Gọi hàm. 


<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional 
«html xmlnsz'http://www.w3.0rg/1999/xhtml" > 
«head» 
<title>Đăt hoa quả</t1tle> 
«script type="text/Javascrlipt”> 
function orderFruit() ( 
var total - 0; 
// Goi hàm khác dé dát don hàng 
return total; 
} 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
var result = orderFruit(); 
Alert("Tông chi phí là " + result); 
</script> 
</body> 
</html> 


Khi chay, đoạn mã này goi đến hà de it().Hàm orderFruit() goi 
mót hàm khác (khóng có trong ví d pn đặt hàng. Sau đó, tổng chi phí 
được tính và trả lai cho hàm goi. Doa ên sé hiển thị hộp thoại thông báo 
như trong Hình 7-4. 
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* 
Hình 7-4 Gọi hàm "orderFruit()" với cá lại kết quả như dự tính. 


Chỉnh sửa một chút — cụ thể là xóa oặc đơn khỏi lời gọi hàm sẽ làm 
thay đối toàn bộ kết quả: 


var result = orderFruit; 


Kết quà được thể hiện trong Hình 7-5. 
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À The total is function orderFruit() { 
var total = 0; 
// Gọi hàm khác để đặt đơn hàng 
return total; 


Hình 7-5 Gọi hàm `orderFruit` không có cáp ngoặc đơn sé tạo kết quả không như mong muốn. 


Bất kể hàm có trả về giá trị hoặc nhận đối số hay không, việc gọi hàm với cặp 
ngoặc đơn là thao tác quan trọng. 


Hàm vô danhikhông được đặt tên 


Các hàm bạn đã thấy ở trên đều được định nghĩa theo chuẩn. Tuy nhiên, 
JavaScript không đòi hỏi hàm phải được định nghĩa theo cách đó. Ví dụ, với 
cách tạo hàm không tên hay còn gọi là hàm vô danh, hàm có thể được định nghĩa 
và gắn với biến như sau: 


var divNums = function(firstNum,secondNum) { return firstNum 


Bạn có thé dé dàng kiểm tra hàm này với giả giao thức javascript:. Hãy nhập 
dòng mã sau vào thanh địa chỉ trên trình duyệt của bạn: 


javascript:var divNums = function(firstNum,secondNum) { 


return firstNum / s um; }; 
alert(divNums(8,2)); 


Các hàm vô danh thường được dù aScript hướng đối tượng và dùng 
làm hàm xử lý sự kiện. Bạn có thể xe ụ về cách sử dụng này trong Chương 
8 “Các đối tượng trong JavaScript” và trong các chương sau. 


Bao đóng - Closure 


Trong JavaScript, các hàm con bên trong có quyền truy cập đến các biến của 
hàm cha bên ngoài. Closure chỉ sự tồn tại của các biến bên ngoài ngữ cánh 
thực thi thông thường của hàm. Closure thường được vô ý tạo ra và có thể gây rò 
rỉ bộ nhớ trong Windows Internet Explorer nếu không được xử lý đúng cách. 
Tuy nhiên, closure lại là một trong những tính năng mạnh (và cao cấp) trong 
JavaScript. 


Xem xét ví dụ sau: 


function myFunction() { 

var myNum = 10; 
function showNum() ( 
alert(myNum); 


j 


return showNum( ); 


var callFunc - myFunction(); 
myFunction(); 


Trong ví dụ này, hàm showNum có quyền truy cập tới biến myNum được tao ở 
hàm bên ngoài, hàm myFunction. Biến ca11Func được tao trong ngữ cánh 
toàn cục và chứa một tham chiếu tới hàm showNum. Khi biến callFunc được 
tạo, nó lập tức có quyền truy cập tới biến myNum. 


Closure có thể được sử dụng để giả lập phương thức private bên trong đối tượng, 
và có thể áp dụng trong các hàm xử lý sự kiện. Closurelà một trong những khái 
niệm mạnh và nâng cao trong JavaScript, bởi vậy đề tài này không thích hợp để 
thảo luận chi tiết trong một cuốn sách cơ bán. Bạn có thể tim hiểu thêm về 
closure tai địa chỉ http:⁄⁄msdn.microsoft.com⁄en- 
us/scriptjunkie/ff696765.aspx và từ những nguồn thông tin khác trên 
Internet. 


Phương thức 


Phương thức được hiểu một cách đơn giản nhất chính là các hàm được định 
nghĩa bên trong một đối tượng. Bạn có thể truy cập phương thức của một đối 
tượng bằng toán tử dấu chấm (". "). Các đối tượng có sẵn trong JavaScript, như 
Math, Date, và String, đều có các phương thức nhu ban đã thấy (hoặc sẽ thấy) 
trong cuốn sách này. Các hàm như hàm alert( ) thực chất là các phương thức 
của đối tượng window và có thể được viết là window.a1ert( ) thay vì chỉ là 
alert(). Chương 8 sé thảo luận chi tiết hơn về đối tượng và phương thức. 


Chú ý Trong nhiều phần của cuốn sách, tác giả dùng tương đương hai thuật 
ngữ phuong thức và hàm. Như vậy, ban có thể hiểu rằng ranh giới giữa hai 
khái niệm này trong hầu hết trường hợp rất mờ nhạt. Khi một hàm được sử 


dụng theo cách thức hướng đối tượng, dùng thuật ngữ phương thức sẽ rõ 
ràng hơn. Khi không trực tiếp dùng trong cách thức hướng đối tượng - ví 
dụ, cách bạn dùng hàm alert( ) — thuật ngữ hàm là chấp nhận được. 


Tự dinh nghĩa hàm và sử dung các hàm có sẵn 


Nhu ban đã thấy xuyên suốt cuốn sách, JavaScript có rất nhiều hàm/phuong 
thức tích hợp sẵn. Ngoài việc sử dụng các hàm có sẵn, bạn sẽ cần tự tạo 
hàm. Ngoại trừ những ứng dụng hết sức đơn giản, hầu hết ứng dụng bạn viết 
sẽ dùng những hàm tự tạo. 


Tuy nhiên, trong một số trường hợp, bạn có thể định nghĩa hàm và sau đó 
phát hiện ra JavaScript đã có sẵn một hàm với chức năng tương tự. Nếu bạn 
biết hàm có sẵn trong JavaScript thực hiện cùng chức năng với hàm của bạn, 
dùng hàm có sẵn của JavaScript thường là phương án tối ưu hơn. 


Sơ lược về các hàm hội thoại 


Cho tới giờ, bạn đã biết tất cả về hà 
biết rằng hàm a1er £ ( ) thực chất 1 
Phần này giới thiệu cách dùng phổ b 
hai hàm liên quan khác của đối tượng 


) trong JavaScript. Bạn cũng đã 
ø thức của đối tượng window. 
am alert() trong JavaScript và 


Thông tin bổ sung Đối tượng window rất quan trọng và sẽ được trình bày 


kỹ hơn trong Chương 9 “Mô hình đối tượng trình duyệt”. Chương 9 cũng 
thảo luận vé nhiều phương thức khác của đối tượng window. 


Mặc dù đối tượng window có nhiều phương thức, nhung trong phần này, chúng 
ta sẽ xem xét ba phương thức (cũng có thé gọi là hàm) sau alert(), 
confirm() và prompt(). Vi bạn đã thấy quá nhiều hộp thoại alert( ) trong 
cuốn sách, chúng ta sẽ không đưa nó vào đây nữa. Chương 6 “Điều khiển luồng 
với câu lệnh điều kiện và vòng lặp” đã trình bày cách sử dung hàm prompt ( ) 
và việc Internet Explorer 7 mặc định chặn hàm này vì lý do bảo mật. Dù vậy, 
hàm confirm() vẫn có trong Internet Explorer. 


Hàm conf irm() hiển thị một hộp thoại trang thái với hai button OK và Cancel, 
nhu minh họa trong Hinh 7-6. (Hộp thoai trạng thái ngăn các hành động khác 


trên trinh duyệt cho đến khi người dùng đóng hộp thoại bằng cách nhấn OK hoặc 
Cancel). 


Message from webpage MÀ 


o Nhãn OK hoặc Cancel. 


ười dùng xác nhận hành động. 


` “ 
Hình 7-6 Hàm `confirm()` hiển thị hộp > 2 
Khi bạn nhấn OK, hàm conf1rm( ) tr true. Khi bạn nhấn Cancel, hàm 


confirm( ) trả về false. 


Giống như alert() và prompt ( ), hàm confirm( ) tạo một hộp thoại trạng 
thái trên hầu hết các platform (nén tảng). Nếu được sử dụng quá nhiều hoặc được 
dùng không đúng lúc, các hàm này sẽ gây khó chịu cho người dùng. Nếu được 
dùng hợp lý để cung cấp phản hồi quan trọng và tiếp nhận thông tin thiết yếu, 
những hàm này khá hữu dụng. 


Mách nhỏ Đừng dùng hàm confirm() thay cho form để tiếp nhận thông 


tin đầu vào trên trang web. Form tốt hơn nhiều vé mặt điều hướng và thường 
được người dùng dễ dàng chấp nhận hơn. 


Bài tập tiếp theo hướng dẫn ban sử dung hàm conf1rm( ) để nhận thông tin đầu 
vào và đưa ra quyết định dựa trên những thông tin đó. 


Xác nhận thông tin với hàm confirm() 


1. Dùng Microsoft Visual Studio, Eclipse hoặc trinh soạn thảo khác mở file 
confirm.htm trong thư mục mã nguồn mẫu Chương 7 của Tài nguyên đi kèm. 


2. Trong trang này, thay thế dòng chú thích TO DO bằng đoạn mã in đậm sau 
(bạn có thể tìm thấy đoạn mã này trong file confirm.txt của Tài nguyên đi 
kẻm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Xác nhận thông tin</title> 
«script type-"text/javascript'» 
function processConfirm(answer) { 
var result =  ""; 
if (answer) { 
result - "Tuyét. Chüng ta sé choi 
) else 
“Có thé một lúc nữa.”; ** 
} 
return 
</script> 
</head> 
<body> 


«script type="text/javascript"> 

var confirmAnswer = confirm(“Chúng ta chơi một ván chú?” ); 
var theAnswer = processConfirm(confirmAnswer); 
**alert(theAnswer);** 

</script> 

</body> 

</html> 


3. Lưu và dùng trình duyệt mở trang. Ban sẽ thấy một hộp thoai giống nhu sau: 


` + 


4. Nhân OK. Bạn sẽ thấy một hộp 
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+ 
^^ 
` 


A Tuyệt. Chúng ta së chơi một ván cờ hay. 


LS E 


5. Nhàn OK và sau dó tái lai trang web. 


6. Hộp thoai confirm( ) hiện lén, hỏi ban có muốn chơi một ván cờ không. 
Lần này, ban chon Cancel. Hộp thoại alert( ) khác sẽ hiện ra: 


Message from webpage Iz 


k A 


7. Nhân OK để đóng hộp thoại. 


Đoạn mã có hai phần chính cần chú ý, mót trong thé <head> và một trong thẻ 
«body». Hàm processConfirm(answer) được tao trong phần <head> của 
trang web: 


function processConfirm(answer) { 
var result = ""; 
if (answer) { 
result = "Tuyệt. Chúng ta sé chơi một ván cờ 
} else { 
result = "Có thể một lúc nữa."; 
} 


return result; 


} 


Hàm này đánh giá giá tri có trong đối số answer. Nếu giá trị của biến answer là 
true, đồng nghĩa với việc người dùng chon OK, hàm sé tạo biến result và gán 
giá trị cho biến result là chuỗi “Tuyệt. Chúng ta sé chơi một ván cờ hay". Nếu 
giá trị của biến answer là fa1se, đồng nghĩa với việc người dùng chọn Cancel, 
hàm sẽ vẫn tạo biến result nhưng gán giá trị cho biến result là chuỗi “Có thể 


một lúc nữa”. Bất kể biến answer lưu giá tri gi, hàm processConf irm trả về 
biến result cho hàm gọi bằng câu lệnh return bên trong hàm. Ban có thể viết 
hàm này ngắn gọn như sau: 


function processConfirm(answer) { 
if (answer) { 
return "Tuyệt. Chúng ta sé chơi một ván cờ hi 
} else { 
result = "Có thể một lúc nữa. "; 
} 


} 
Và thậm chí ngắn gọn hơn nữa: 


function processConfirm(answer) { 
var result; 
(answer) ? result - "Tuyét. Chüng ta sé choi mót ván 
return result; 


Chú ý Tôi sẽ chon sử dung hàm g cuối cùng. Tuy nhiên, nhiều lập 


trình viên không thoải mái lắm vớ Su kiện ba ngôi nhu trong ví du 
trên. Vì thế, để dễ đọc, chúng ta sẽ chọn cách làm tường minh hơn trong 
mẫu thứ hai: 


function processConfirm(answer) { 
if (answer) { 
return "Tuyệt. Chúng ta sé choi một ván cờ hi 
) else ( 
result = "Có thé một lúc nữa. "; 
J 


} 


Mã JavaScript bên trong phân <body> của đoạn mã tạo một hộp thoai xác nhận, 
goi hàm processConfirm() và hiển thị kết quả. 

var confirmAnswer = confirm( "Chúng ta chơi một ván chü?"); 
var theAnswer = processConf1rm(conf1rmAnswer); 
alert(theAnswer); 


Giống nhu hàm alert(), hàm confirm() nhận vào một đối số duy nhất, đó là 


nội 


dung thông báo để hiển thị trong hộp thoại. Chỉ có một lưu ý là với hàm 


confirm(), bạn nên đặt nói dung thông báo theo dạng câu hỏi hoặc thông điệp 
cho phép người dùng lựa chọn. Nếu người dùng không đưa ra lựa chọn nào, hãy 
thay thế bằng hàm alert(). Cách viết ngắn gọn kết hợp cả ba dòng lệnh nhu 
Sau: 


alert(processConfirm(confirm("Chüng ta choi một ván chứ2”))) 


Bài táp 


1; 


. Thêm các hàm alert() vào n 


Định nghĩa một hàm nhận vào một đối số dạng số, tăng giá trị đối số đó và 
trả lại giá trị cho lời gọi hàm. Gọi hàm từ trong phần <body> của trang web 
và hiển thị kết quả lên màn hình. 


. Định nghĩa hàm nhận vào hai tham số dạng số. Nếu giá trị của tham số thứ 


nhất lớn hơn tham số thứ hai, hiển thị 
Nếu giá trị của tham số thứ nhà 
tổng của hai tham số. 


hộp thoại thông báo cho người dùng. 
oặc bằng tham số thứ hai, trả về 


thích hợp trong đoạn mã sau để 
ban có thể nhìn thấy giá trị của biến result trước và sau lời goi hàm. Đoạn 
mã có dạng như sau: 


function addNumbers() { 
firstNum - 4; 
secondNum - 8; 
result = firstNum + secondNum; 
return result; 


o 1 


result H 
addNumbers(); 


result 


Tao mót máng vói báy phàn ti? dang chuói có giá tri là tén các ngói sao sau: 
Polaris, Aldebaran, Deneb, Vega, Altair, Dubhe và Regulus. Tạo một mảng 
khác với bảy phần tử dang chuỗi có giá trị là tên các chòm sao tương ứng 
chứa các ngôi sao: Ursa Minor, Taurus, Cygnus, Lyra, Aquila, Ursa Major và 
Leo. Tiếp theo, tao một hàm nhận vào một tham số dang chuỗi duy nhất. 
Trong hàm này, duyệt qua mảng thứ nhất để tìm tên ngôi sao. Nếu tìm thấy, 


trả lại giá tri tương ứng với chi số đó ở mảng thứ hai. Nói cách khác, trả lại 
tên chòm sao của ngôi sao đó. Trong phần <body> của trang web, dùng hộp 
thoại prompt để người dùng nhập vào tên của ngôi sao, sau đó gọi hàm với 
thông tin đầu vào. Đừng quên xử lý trong trường hợp không tìm thấy ngôi 
sao nào. Cho kết quả hiển thị trên màn hình. 


Chuong 8 
Các đối tượng trong JavaScript 


Sau khi doc xong chương này, bạn có the: 
= Hiểu về đối tượng trong JavaScript, bao gồm thuộc tính, phương thức và 
lớp. 
» Tạo đối tượng. 
= Định nghĩa thuộc tính và phương thức cho đối tượng. 
= Hiểu về mảng trong JavaScript. 


= Sử dụng một số phương thức của mảng. 


Lập trình hướ ¡ tượng 


Nếu bạn mới làm quen hoặc muốn bổ sung kiến thức về lập trình hướng đối 
tượng, hãy đọc tiếp phần này. Nếu bạn đã quen với lập trình hướng đối tượng, 
hãy bỏ qua đến phần “Tạo đối tượng”. 


Phương thức lập trình mô tả phương pháp luận được sử dụng để giải quyết vấn 
đề. Có tới hơn 25 phương thức lập trình khác nhau đang tồn tại, một vài trong số 
đó khó có thể được tìm thấy trong chương trình thực tế nào. Có thể, bạn đã từng 
nghe nói đến một vài phương thức hoặc thậm chí đã áp dụng mà không hề hay 
biết. Có thể kể ra đây một số phương thức lập trình sau: lập trình hướng chức 
năng, lập trình hướng sự kiện, lập trình hướng thành phần và lập trình cấu trúc. 


Những phương thức lập trình lần lượt xuất hiện rồi biến mất. Lập trình hướng 
đối tượng đã tôn tại nhiều năm, tuy nhiên phương thức này sẽ vẫn được áp dụng 
rộng rãi. Phần này chỉ cung cấp cho bạn cái nhìn toàn cảnh về chủ đề trên, tuy 
vậy bạn cần làm quen với các thuật ngữ và kỹ thuật lập trình hướng đối tượng để 
hiểu những phương pháp và thuật ngữ thường dùng của lập trình viên JavaScript. 


Vs 
ĐỐI tượng 

Đối tượng (Object) chính là vật thể. Trong thế giới thực, trái ngược với thế giới 
ảo và thế giới siêu thực của lập trình máy tính, quả bóng, cái bàn, xe ô tô đều là 
đối tượng. Đối tượng có những đặc điểm có thể mô tả, bạn có thể tương tác với 
nó và nó hoạt động theo một cách thức nhất định. Đối tượng trong phương thức 
lập trình hướng đối tượng là sự kết hợp đoạn mã và dữ liệu để biểu diễn các đặc 
điểm và phương thức theo cách thức tương tự. 


Thuộc tính 


Đối tượng có các thuộc tính (property) — xác định các đặc tính của nó. Ví 
dụ, trên thực tế, quả bóng có thuộc tính màu sắc — nó có thể đỏ, trắng hay nhiều 
màu. Nó cũng có thuộc tính về kích cỡ - nhỏ như quả bóng chày hoặc lớn như 
quả bóng rổ. Những thuộc tính này có thể biểu diễn như sau: 


ball.color 
ball.size 


Phương thức 


Không chỉ có thuộc tính, đối tượng còn có cả phương thức. Phương thức 
(method) định nghĩa cách thức hoạt động của đối tượng. Một quả bóng có thể 
có phương thức lăn, phương thức này tính toán quả bóng sẽ lăn được bao xa. Về 
lý thuyết, không phải tất cả các đối tượng đều có phương thức hay thuộc tính, 
tuy vậy trên thực tế hầu hết các đối tượng đều có ít nhất một phương thức hay 
một thuộc tính. 


Hãy nhớ lại Chương 7 “Làm việc với hàm”, phương thức chỉ là một hàm thuộc 
về đối tượng. Định nghĩa phương thức sử dung hàm 1iteral (function 
literal) cho phương thức ro11 có dang như sau: 
ball.roll- function()(//roll - lăn 
var distance - this.size * this.forceApplied; 
//distance -khoáng cách, forceApplied - luc tác dung 


j 


This là gi? 


Trong ví du ba11. ro11 có sử dung từ khóa this, nhằm chi đến đối tượng 
chứa hàm hay thuộc tính hiện tại. Trong ngữ cảnh của đối tượng, từ khóa 
this là để gọi đến đối tượng. Từ khóa this có thể được sử dụng để thiết 
lập các thuộc tính của đối tượng trong lời gọi hàm. 


Từ khóa this rất có ích cho các lập trình viên JavaScript khi kiểm tra tính 
hợp lệ của web form. Bạn sẽ tìm hiểu kỹ hơn về nội dung này trong Chương 
14 “Sử dụng JavaScript với Web Form ”. 


Lớp 
Trong lập trình hướng đối tượng, lớp (class) định nghĩa một tập các đối tượng có 
chung thuộc tính và phương thức. Lớp đơn giản hóa việc tạo nhiều đối tượng 
cùng kiểu. Tuy vậy, ECMA-262 không có khái niệm về lớp trong giao diện đối 
tượng. Để tối ưu hóa lợi ích của việ dựa trên lớp, bạn cần phải sử dụng 
các mẫu để tạo lớp giả. 


Hãy xem lại ví dụ về các chòm sao rinh bày ở các chương trước. Ví du 
8-1 (file Listing8-1.txt trong Tài nguyên di kèm) cho thấy những gi bạn cần để 
có một trang web bao gồm thông tin về 14 ngôi sao chính. 


VÍ DU 8-1 Lắp ghép đối tượng star. 


var star= {}; 
star["Polaris"]- newObject; 
star["Mizar"]- newObject; 
star["Aldebaran"]- newObject; 
star["Rigel"]- newObject; 
star["Castor"]- newObject; 
star["Albireo"]- newObject; 
star["Acrux"]-7 newObject; 
star["Gemma"]- newObject; 
star["Procyon"]- newObject; 
star["Sirius"]- newObject; 
star["Rigil Kentaurus"]- newObject; 
star["Deneb"]- newObject; 


star[ "Vega" ]= newObject; 

star["Altair"]- newObject; 
star["Polaris"].constellation- "Ursa Minor"; 
star["Mizar"].constellation- "Ursa Major"; 
star["Aldebaran"].constellation- "Taurus"; 
star["Rigel"].constellation- "Orion"; 
star["Castor"].constellation- "Gemini"; 
star["Albireo"].constellation- "Cygnus"; 
star["Acrux"].constellation- "Crux"; 
star["Gemma"].constellation- "Corona Borealis"; 
star["Procyon"].constellation- "Canis Minor"; 
star["Sirius"].constellation- "Canis Major"; 
star["Rigil Kentaurus"].constellation- "Centaurus"; 
star["Deneb"].constellation- "Cygnus"; 
star["Vega"].constellation- "Lyra"; 
star["Altair].constellation- "Aquila"; 
star["Polaris"].type- "Double/Cepheid"; 
star["Mizar"].type- "Spectroscopic Binary"; 
star["Aldebaran"].type- "Irregular Variable"; 
star["Rigel"].type- "Supergiant with Companion"; 
star["Castor"].type- "Multiple/Spectroscopic"; 
star["Albireo"].type- "Double"; 
star["Acrux"].type- "Double"; 
star["Gemma"].type- "Eclipsing Binary"; 
star["Procyon"].type- "Double"; 
star["Sirius"].type- "Double"; 

star["Rigil Kentaurus"].type- "Double"; 
star["Deneb"].type- "Supergiant"; 
star["Vega"].type- "White Dwarf"; 
star["Altair"].type- "White Dwarf"; 
star["Polaris"].spectralClass- "F7"; 
star["Mizar"].spectralClass- "A1 V"; 
star["Aldebaran"].spectralClass- "K5 III"; 
star["Rigel"].spectralClass- "B8 Ia"; 
star["Castor"].spectralClass- "A1 V"; 
star["Albireo"].spectralClass- "K3 TT"; 
star["Acrux"].spectralClass- "B1 IV"; 
star["Gemma"].spectralClass- "AO V"; 
star["Procyon"].spectralClass- "F5 IV"; 
star["Sirius"].spectralClass- "A1 V"; 
star["Rigil Kentaurus"].spectralClass- "62 V"; 
star["Deneb"].spectralClass- "A2 Ia"; 


star["Vega"].spectralClass- "AO V"; 
star["Altair"].spectralClass- "A7 V"; 
star["Polaris"].mag- 2.0; 
star["Mizar"].mag- 2.3; 
star["Aldebaran"].mag- 0.85; 
star["Rigel"].mag- 0.12; 
star["Castor"].mag- 1.58; 
star["Albireo"].mag- 3.1; 
star["Acrux"].mag- 0.8; 
star["Gemma"].mag- 2.23; 
star["Procyon"].mag- 0.38; 
star["Sirius"].mag- -1.46; 
star["Rigil Kentaurus"].mag- -0.01; 
star["Deneb"].mag- 1.25; 
star["Vega"].mag- 0.03; 
star["Altair"].mag- 0.77; 


Nhu ban đã thấy, Danh sách 8-1 chứa rất nhiều đoạn mã lặp di lặp lại. Mỗi ngôi 
sao được định nghĩa và khai báo bốn thuộc tính: chòm sao (constellation), loại 
sao (type), lớp quang phổ (spectral clas độ lớn (mag). 


isting8-2.txt của Tài nguyên đi 
8-1 với sự trợ giúp của mẫu hàm 


Tiếp theo, hãy xem Ví dụ 8-2 (nã 
kèm). Kết quả giống như đoạn mã t 
khởi tạo để tạo lớp giả. 


VÍ DU 8-2 Lắp ghép đối tượng star sử dụng lớp giả. 


var star= {}; 
function Star(constell,type,specclass,magnitude) { 
this.constellation- constell; 
this.type- type; 
this.spectralClass- specclass; 
this.mag = magnitude; 


star["Polaris"]- new Star("Ursa Minor","Double/Cepheid","F 
star["Mizar"]- new Star("Ursa Major","Spectroscopic Binary 
star["Aldebaran"]- new Star("Taurus","Irregular Variable", 
star["Rigel"]- new Star("Orion","Supergiant with Companion 
star["Castor"]- new Star("Gemini"," "Multiple/Spectroscopic" 
star["Albireo"]- new Star("Cygnus","Double","K3 TT”,3.1); 
star["Acrux"]-7 new Star("Crux", "Double"”", "B1 IV",0.8); 
star["Gemma"]- new Star("Corona Borealis","Eclipsing Binar 


star["Procyon"]- new Star("Canis Minor","Double","F5 TV",0 
star["Sirius"]- new Star("Canis Major","Double","A1 V",-1. 
star["Rigil Kentaurus"]- new Star("Centaurus", "Double", "62 
star["Deneb"]- new Star("Cygnus", "Supergiant","A2 Ia",1.25 
star["Vega"]- new Star("Lyra","wWhite Dwarf","AO V",0.03); 

star["Altair"]- new Star("Aquila","White Dwarf","A7 V",0.7 


Hàm Star được in đậm trong Ví du 8-2 tạo một giao diện giúp khởi tao đối 
tượng Star nhanh chóng. 


Khi được gọi, hàm này trả về một đối tượng Star mới: 
star["Polaris"]|- new Star("Ursa Minor”, "Double/Cephe1d", "F7" 


Mặc dù Ví dụ 8-1 và 8-2 giống nhau về chức năng, nhưng đoạn mã trong Ví dụ 
8-2 ngắn gọn và dễ hiểu hơn. Hãy tưởng tượng một đối tượng có chín thay vì 
bốn thuộc tính như trình bày ở đây. 


Việc tạo giao diện giống như lớp trong phần này sử dụng mẫu hàm khởi tạo. 
Mẫu hàm khói tạo khá hữu dụng ngoai4fừ-việc chúng tạo ra nhiều thực thể của 
cùng một phương thức. Cách tối hơn khi tạo nhiều đối tượng là sử 
dụng nguyên mẫu prototype. Xem msdn.microsoft.com/en- 
us/magazine/cc163419.aspx. vé c tượng su dung prototype. 


Tao đối tượng 


Có hai cách để tạo đối tượng trong JavaScript: 
= Sử dụng từ khóa: 

var star- new Object; 
= Hoặc sử dung dấu ngoặc nhọn: 

var star- (Y; 


Cá hai cách đều cho những kết quả giống nhau. Vì vậy, việc sử dụng cách thức 
nào phụ thuộc vào sở thích cá nhân của bạn. 


Thêm thuộc tính cho đối tượng 


Sau khi tạo xong đối tượng, bạn cần gán thuộc tính và phương thức cho đối 
tượng. Nếu nhu chỉ có một đối tượng star, ban có thể trực tiếp gán thuộc tính 
cho nó: 


star.name- "Polaris"; 
star.constellation- "Ursa Minor"; 


Khi cần tao nhiều đối tượng liên quan đến nhau, ban có thé gán thuộc tính một 
cách hiệu quả bằng cách làm như ví dụ ở phần trước. 


Hiển thị thuộc tính của đối tượng 


Với vòng lặp for...1n, bạn có thể duyệt từng thuộc tính của đối tượng. 


Duyệt các thuộc tính của đối tượng 


oặc trình soạn thảo khác sửa file 


1. Sử dụng Microsoft Visual Stud Eclips 
nmẫu của Chương 8, phần Tài nguyên 


proploop.htm trong thư mục mã 
đi kèm. 


2. Sử dụng Microsoft Visual Studio, Eclipse hoặc trình soạn thảo khác sửa file 
proploop.htm trong thư mục mã nguồn mẫu của Chương 8, phần Tài nguyên 
di kém. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title»Thuóc tính</title> 
«script type-"text/javascript'» 
var star- (Y; 
function Star(constell,type,specclass,magnitude) + 
this.constellation - constell;//chóm sao 
this.type - type; //kiéu 
this.spectralClass = specclass; //lóp quar 
this.mag = magnitude; //dó lớn 


star["Polaris"]- new Star("Ursa Minor","Double Cephe1d"”, "t 
star["Mizar"]- new Star("Ursa Major","Spectroscopic Binar\ 
star["Aldebaran"]- new Star("Taurus","Irregular Variable", 
star["Rigel"]- new Star("Orion","Supergiant with Companior 
star["Castor"]|- new Star("Gemini","Multiple/Spectroscopic' 
star["Albireo"]- new Star("Cygnus","Double","K3 TT”,3.1); 
star[ "Acrux”]= new Star("Crux", "Double","B1 IV",0.8); 
star["Gemma"]- new Star("Corona Borealis","Eclipsing Bina! 
star["Procyon"]|- new Star("Canis Minor","Double","F5 TV",( 
star["Sirius"]- new Star("Canis Major","Double","A1 V",-1. 
star["Rigil Kentaurus"]- new Star("Centaurus", "Double","G; 
star["Deneb"]- new Star("Cygnus", 'Supergiant","A2 Ia",1.2: 
star["Vega"]- new Star("Lyra","White Dwarf","AO V",0.03); 
star["Altair"]- new Star("Aquila","White Dwarf","A7 V",0.; 
</script> 

</head> 

<body> 

«script type="text/javascript"> 

for(var propt in star){ 
alert(propt); 


</script> 
</body> 
</html> 


. Dùng trinh duyét mó trang web. Hóp thoai thông báo cho 14 ngôi sao sé làn 
lượt hiện ra. (Ban sé phải nhấn OK khá nhiều). Đây là ví du về hộp thoai mà 
ban sé nhìn thấy: 


Message from webp... -= 


Polaris 


Bài tập hướng dẫn từng bước này dựa trên ví dụ trước đó về cách sử dung lớp 
giá để định nghĩa thuộc tính của đối tượng. Trong trường hợp này, đối tượng 
star được tạo bởi dòng mã: 


var star- (Y; 


Đối tượng gán từng thuộc tính riêng cho ngôi sao bằng cách sử dung lời goi tao 
một đối tượng Star mới (sử dụng lớp giả): 

star["Polaris"]- new Star("Ursa Minor","Double/Cepheid","F7" 
Từng thuộc tính của đối tượng góc star, trong trường hợp này là tên của từng 


ngôi sao, được liệt kê trong phần <body> bởi đoạn mã sử dụng vòng lặp for... 
in. 


for(var propt in star)( 
alert(propt); 


Có thể ban sé bán khoán làm thế nào để biết thuộc tính thật của các ngôi sao, 
như chòm sao, độ lớn, loại và lớp quang phổ. Chương 14 sẽ hướng dẫn cách liệt 
kê từng thuộc tính trên. 


Tìm kiếm thuộc tính 


Đôi khi, bạn không muốn hoặc không cần duyệt qua từng thuộc tính. Đôi khi, 
bạn chỉ muốn biết một thuộc tính có tồn tại trong đối tượng không. Bạn có thể sử 
dụng toán tử 7n để kiểm tra thuộc tính như đoạn mã giả sau: 


if(property in object){ // property và object là tên thuộc t. 
// viết má ở đây 

} 

Ví dụ 8-3 phức tạp hơn (ví dụ này có trong file Listing8-3.txt của Tài nguyên đi 
kèm) kiểm tra đối tượng star để tì ôi sao “Polaris” và nếu tìm thấy, thì 
thêm vào nó một thuộc tính mới. 


Ví dụ 8-3 Tìm kiếm thuộc tính. 


var star= {}; 
function Star(constell,type,specclass,magnitude) { 
this.constellation - constell; 
this.type - type; 
this.spectralClass - specclass; 
this.mag = magnitude; 


star["Polaris"]- new Star("Ursa Minor","Double/Cepheid","F 
star["Mizar"]- new Star("Ursa MaJor"”, "Spectroscopic Binary 
star["Aldebaran"]- new Star("Taurus","Irregular Variable", 
star["Rigel"]- new Star("Orion","Supergiant with Companion 
star["Castor"]- new Star("Gemini"," 'Multiple/Spectroscopic" 
star["Albireo"]- new Star("Cygnus","Double","K3 TT”,3.1); 
star[ "Acrux”]= new Star("Crux", "Double"”", "B1 IV",0.8); 
star["Gemma"]- new Star("Corona Borealis","Eclipsing Binar 
star["Procyon"]- new Star("Canis Minor","Double","F5 TV",0 
star["Sirius"]- new Star("Canis Major","Double","A1 V",-1. 
star["Rigil Kentaurus"]- new Star("Centaurus", "Double", "62 


star["Deneb"]- new Star("Cygnus", "Supergiant","A2 Ia",1.25 
star["Vega"]- new Star("Lyra","White Dwarf","AO V",0.03); 
star["Altair"]- new Star("Aquila","White Dwarf","A7 V",0.7 
if ("Polaris" in star) { 

star["Polaris"].aka- "The North Star"; 

alert("Sao Polaris dà duoc tao, sao này cón có tén 


Chú y Có một vài cách khác để kiểm tra sự tồn tại của thuộc tính nhưng 


chúng không được đề cập đến ở đây, ví dụ như việc sử dụng toán tử !==. 


Thêm phương thức vào đối tượng 


Bạn cũng có thể thêm các phương thức cho đối tượng tự định nghĩa bằng cách 
tương tự nhu cách thêm thuộc tính. Giả sử bạn muốn mở rộng lớp Star ở ví du 
trước đó để có thêm phương thức show( ), phương thức goi ra hộp thoại 
alert(). Ban có thể mở rộng phương thức này tùy ý. Ví dụ, hãy xem đoạn mã 
bên dưới (xem trong file adding-m ủa Tài nguyên đi kèm): 


function Star(constell,typ 
this.constellation 
this.type - type; 
this.spectralClass - specclass; 
this.mag - magnitude; 
this.show = function(){ 

alert( "xin chào, đây là phương thức. "); 

} 


ss,magnitude) { 
ell; 


} 


Dé gọi đến phương thức, ban dùng dòng mã như sau: 
star[”Polaris" ].show(); 


Lập trình hướng đối tượng trong JavaScript không chỉ dừng lại ở đây. Những 
tính năng chuyên sâu của phương thức lập trình hướng đối tượng như tính kế 
thừa, siêu lớp và prototype (nguyên mẫu) đều có trong JavaScript, tuy vậy chúng 
không nằm trong phạm vi của cuốn sách. Tạp chí MSDN có đăng một bài báo 
về những khái niệm chuyên sâu, bạn có thể tìm đọc tại địa chỉ 
"http://msdn.microsoft.com/en-us/magazine/cc16341 9.aspx. 


Tim hiểu thêm vé mảng 


Chương 4 đã giới thiệu về mảng và đưa ra một số ví dụ để định nghĩa mảng. Sử 
dụng mảng, bạn có thể nhóm một tập các giá trị vào một đối tượng và truy cập 
đến những giá trị này thông qua giá trị của chỉ số (index). Ví dụ, ban có thể sử 
dụng hàm khởi tạo như sau (xem file morearrays.txt của Tài nguyên đi kèm): 


var star= new Array(); 
star[0]- "Polaris"; 
star[1]- "Deneb"; 
star[2]- "Vega"; 
star[3]= "Altair"; 


Ban cũng có thé sử dung hàm tao mảng ngầm dinh (biểu thi bởi cặp ngoặc 
vuông) để thực hiện tác vụ trên như sau: 
var star- ["Polaris","Deneb"," 


ega","Altair"]; 


Thuộc tính length 


Thuộc tính 1ength của một mảng trả về Số lượng các phần tử trong mảng. Có 
sự khác biệt quan trọng giữa số lượng phần tử mà mảng đang chứa và số lượng 
đã được định nghĩa. Đây là một ví dụ đơn giản. Hãy xem xét cách định nghĩa 
mảng star mà chúng ta đã đề cập trước đó. Có bốn ngôi sao: Polaris, Deneb, 
Vega và Altair. Thuộc tính 1ength trả về cùng kết quả: 


var numStars- star. length; // star.length bằng 4. 


Các phần tử được đếm bởi thuộc tính 1ength chưa được định nghĩa hay khởi 
tạo. Đây là ví dụ về việc tạo mảng chứa nhiều phần tử hơn nó được gán: 


var myArray- new Array(5); 


Phương thức của màng 
Phần này giới thiệu bạn làm quen với một số phương thức của đối tượng array. 
Ban có thể tìm hiểu thêm thông tin về các phương thức này trong bản đặc tả 


ECMA-262 tại http://www.ecma-international.org/publications/files/ECMA- 
ST/Ecma-262.pdf. 


Thêm và bớt phần tử 


Bạn có thể thêm phần tử vào đầu hoặc cuối mảng bằng nhiều cách thức khác 
nhau. 


Sử dụng concat() để thêm phần tử. Phương thức concat() giúp thêm phần tử 
vào cuối mảng. Để sử dụng, goi hàm concat ( ) với đối số chứa phần tử muốn 
thêm vào. Hàm này trả về mảng mới như sau (xem file morearray.txt của Tài 
nguyên di kèm): 


var myArray= new Array(); 

myArray[0]= "first"; 

myArray[1]= "second"; 

var newArray- myArray.concat("third"); 

// Mảng newArray bây gió có các phần tử là[first, second, thir 


Bạn có thể kết hợp hai mảng vào là sau: 


var myFirstArray= [51,67]; 
var mySecondArray= [18, "he ; 
var newArray= myFirstArray.c (mySecondArray) 

// Mång newArray bây giò có các phân tü là[51,67,18,"hello",: 


Thêm phần tử với concat() 


1. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác, sửa 
file concat.htm trong thư mục mã nguồn mẫu Chương 8 phần Tài nguyên di 
kém. 


2. Trong trang này, thêm vào đoạn mã được in đậm (xem phần đầu của file 
concat.txt). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Phương thức Concat«/title» 
«script type-"text/javascript'» 
var star = ["Polaris", "Deneb", "Vega", "Altair"]; 


for (var i= 0; 1<star.length; i++) { 
alert(star[1]); 
J 


</script> 
</head> 
<body> 


</body> 
</html> 


3. Lưu trang web, sau đó dùng trinh duyệt mở lại. Ban nhận được hộp thoai 
thông báo alert() cho tên của bốn ngôi sao đã định nghĩa trong mảng ngôi 
sao. 


Message from webp... = 2¬ 


4. Sửa đoạn mã để nối thêm một vài ngôi sao khác vào mảng (Bạn có thể thêm 


trực tiếp vào mảng, nhung nhu vậy là không trung thực). Sau đây là đoạn mã 
hoàn chỉnh (những thay đối so với file concat.txt ở trên đã được in đậm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 
<title>Phương thức Concat«/title-» 
«script type="”text/ZJavascrlipt”> 
var star = [”"Polar1is"”, "Deneb", "Vega”, "Altair"]; 
var newstars- [”Aldebaran”, "Rigel" |; 
var morestars- star.concat(newstars) ; 
var mStarLength- morestars.length; 
for (var 1= 0; i«mStarLength; 1++) { 

alert(morestars[i]); 

} 
</script> 

</head> 

<body> 

</body> 

</html> 


. Lưu file và dùng trình duyệt mở lệ này, bạn nhận được sáu hộp thoại 
alert() cho mỗi ngôi sao, ví dụ dưới đây là hộp thoại cho sao Aldebaran: 


Message from webp... = 3¬ 


Aldebaran 


hs 


Kết nối các phần tử trong mảng với phuong thức join(). Phương thức 
join() chuyển đổi tất cả các phần tử của mảng thành một chuỗi. Phương thức 
này khác với concat( ) vì phương thức concat ( ) chỉ thực hiện chèn thêm vào 
mảng nhưng không thực hiện chuyển đối kiểu dữ liệu. Sau đây là đoạn mã: 


var star- [”Polar1s”, "Deneb”, "Vega", “Altalr "]; 
var starString- star.join(); 


Bien starString chüa Polaris, Deneb, Vega, Altair nhu Hinh 8-1. 


Message from webpage mM 


Polaris Deneb, Vega, Altair 


HÌNH 8-1 Sử dung hàm join() để kết nói các phần tử trong một mảng. 


` 
Phương thức này cho phép chỉ định dẫu phân tách giữa các phần tử khi thực hiện 
kết nối. Thay vì sử dụng dấu phẩy, bạn có thể muốn dùng dấu sao như sau: 


var star= [”Polar1s”, "Deneb", "Vega", "Altair"]; 
var starString= star.join("*"); 


Khi dó, két quà trá vé là PolarisDenebVega*Altair nhu Hinh 8-2. 


Message from webpage € 


A Polaris*Deneb*Vega* Altair 


Y , 
HINH 8-2 Kết nối sử dung dấu * làm dấu phân tách. 


Mách nhỏ Phuong thức 7o1n( ) là phương thức xem nhanh nội dung của 
mảng thay vì tạo cấu trúc vòng lặp for. 


Sử dụng push và pop để thêm và bớt phần tử**. Trong khi phương thức 

concat( ) trả về mảng mới, thi push( ) và pop( ) thêm và bớt phần tử trực tiếp. 
Phương thức push( ) trả về độ dài của mảng mới còn pop( ) trả về phần tử bị 
xóa. Phương thức push( ) và pop() thực thi tại phần cuối của mảng, như mô tả 
dưới đây (bạn có thể xem ví dụ này trong file evenmorearrays.txt của Tài nguyên 
đi kèm): 


var star = ["Polaris","Deneb","Vega","Altair"]; 
star.push("Aldebaran"); 


Sau khi chay, đoạn mã trên trả về đối tượng star có năm phần tử: Polaris, 


Deneb, Vega, Altair và Aldebaran. 
Phuong thức pop( ) xóa di phần tử cuối của mảng và trả về phần tử này. 


var star = ["Polaris","Deneb","Vega","Altair"]; 
var removedElement - star.pop(); 


Biến removedElement lúc này chứa chuỗi *Altair" — phần tử cuối của mảng. 
Độ dài của mảng vi thế cũng bi giám di 1. 


Sử dung shift và unshift để thêm bớt các phần tử**. Phương thức push( ) và 
pop ( ) thuc thi ở cuối của mảng. Phương thức shift() và unsh1ft( ) hoạt 
động tương tự như push( ) và pop( ) nhưng thực thi ở đầu mảng. Trong đoạn 
mã dưới đây, phương thức unshift() thêm một phần tử vào đầu mảng: 


var star = ["Polaris","Deneb","Vega","Altair"]; 
star.unshift("Aldebaran"); 


Lúc này mảng star gồm: 


["Aldebaran", "Polar1s", "De a","Altair"] 


Sử dung phương thức shift() để 
giống như pop(), shift() trả về p 


đầu tiên của mảng. Chú ý là 
i xóa: 

var star = ["Polaris","Deneb","Vega", "Altair"]; 

var removedElement - star.shift(); 


Lüc này máng star góm: 
["Deneb", "Vega", "Altair"] 


Sử dung slice để trả về một phần của máng**. Phuong thức s1ice( ) rất hữu 
ích khi bạn cần trả về một phần của mảng, nhưng bạn nên cẩn thận vì hàm này sẽ 
thay đổi luôn mảng gốc. Ví dụ, đoạn mã sau trả về và gán vào biến cutStars 
giá trị "Vega, Altair" vi Vega và Altair lần lượt là phần tử thứ ba và bón 
của mảng (nhớ rằng mảng bắt đầu từ 0). 


var star = ["Polaris","Deneb","Vega","Altair"]; 
var cutStars - star.slice(2,3); 


Sắp xếp phần tử với sort. Đôi khi ban cần sắp xếp các phần tử trong mảng. 
Xem đoạn mã sau: 


var star = ["Polaris","Deneb","Vega","Altair"]; 
var sortedStars - star.sort(); 


Kết quả trả vé nhu Hinh 8-3. Nhu ban thấy, các phần tử được sắp xếp theo thứ tự 
bảng chữ cái mặc dù khi viết mã chúng ta không sắp xếp chúng theo thứ tự. Chú 
ý: Cả mảng star gốc và biến sortedStars đều chứa danh sách đã được sắp 


Message from webpage € 


Altair, Deneb, Polaris, Vega 


HÌNH 8-3 Kết quả của việc sắp xếp mảng sử dung phương thức sort() 


` 


Hãy cẩn thận khi sử dung phương thức sort( ) để sắp xếp các con số. Xem xét 
đoạn mã sau: 


var nums = [11,543,22,111]; 
var sortedNums - nums.sort(); 


Ban mong muốn bién sortedNums trả vé 11,22,111,543 nhưng thực tế phương 
thức sort() vẫn sắp xếp các giá trị theo thứ tự bảng chữ cái nhu trong Hinh 8- 


Message from webpa... m 


11,111,22,543 


t. , 
HÌNH 8-4 Việc sử dung phương thức sort() để sắp xếp số sẽ hoạt động không nhu mong 
muốn. 


Duyệt toàn bộ mảng. Trong JavaScript, có hai cách để duyệt qua các phần tử 
của mảng. Tại thời điểm viết cuốn sách này, phương thức chủ yếu có thể hoạt 
động trên nhiều trình duyệt là dùng vòng lặp for( ). Bạn có thể ôn lại cá pháp 
của vòng lặp for( ) qua ví dụ sau: 


var candies = ["chocolate","licorice","mints"]; 

for (var i= 0; i«candies.length; i++) { 
alert(candies[i]); 

J 


Được giới thiệu trong ECMA-262 phiên bán 5 và được hỗ trợ trên tất cá các loại 
trình duyệt ngoại trừ Windows Internet Explorer 8 và các phiên bản trước đó, 
phương thức forEach( ) cũng duyệt qua từng phần tử của mảng. Cấu trúc của 
forEach( ) tương tự nhu for(): 


var candies- ["chocolate","licorice","mints"]; 
candies. forEach(funct1on(candy){ 
alert(candy); 


lập 


Chú ý Cần chú ý khi sử dung phương thức forEach( ) (và một số phương 
thức mới khác) vì chúng có thể chưa được hỗ trợ rộng rãi. 


Bạn cũng nên tìm hiểu thêm một số phương thức của đối tượng array. Một vài 
phương thức được liệt kê trong Bảng 8-1, nhưng bạn nên tham khảo chuẩn 
ECMA-262 tai dia chỉ http://www. ecma - 
international.org/publicatio i les/ECMA-ST/ECMA -262. pdf để 
xem danh sách đầy đủ. Những phu ới xuất hiện trong ECMA phiên 
bản 5 đã được đánh dấu. 


BẢNG 8-1 Lựa chọn các phương th 6i tượng Array 
Mới có trong 
Phương thức Mô tả ECMA-262 
phiên bản 5 
reverse( ) Đảo ngược thứ tự các phần tử. Không 
map() Thực thi một hàm với từng phần tử trong mảng và trả về Có 
một mảng. 
Tndex0f() Trá vê chi sô của phân tử đầu tiên của mảng có giá trị Có 
bằng giá trị của đối số. 
lastIndexOf() Trå về chỉ số cuối của đối số trong mảng. Có 
Thực thi một hàm với từng phần tử trong mảng trong khi : 
every() hàm vẫn trả về true. Es 
Thực thi một hàm với từng phần tử trong mảng và trả về 
filter ( ) một mảng chỉ chứa những phần tử mà hàm trả về giá tri Có 
true. 
some( ) Thuc thi một hàm với từng phần tử trong mảng trong khi Có 


hàm vẫn trả về false. 


Chèn hay xóa phần tử trong mảng. Trả về mảng chứa 


splice() những phần tử bi xóa. Không 


Lợi thế của đối tượng có sẵn 


Ngôn ngữ JavaScript tạo ra một số đối tượng hữu ích có sẵn để phục vụ cho 
những công việc chung trong chương trình JavaScript. Trong Chương 4, bạn đã 
làm quen với một số đối tượng như Date, Number và Math. 


ĐỐI tượng toàn cục 

JavaScript có một đối tượng toàn cục chứa một số phương thức mà chúng ta đã 
bàn đến, ví dụ isNaN( ). Ba phương thức thường sử dụng đối tượng toàn cục là 
encodeURI(), encodeURIComponent ( ), và eva1( ) sẽ được đề cập sau đây. 


Giúp URI an toàn 


Phương thức encodeURI ( ) lấy mí 
các ký tự không cho phép trong mã trước và mã hóa nó để có thể sử 
dụng theo chuẩn. Ví dụ, tài liệu RFC (Request for comments) 2396 định nghĩa 
các cú pháp chung cho URI. Phương thức encodeURI ( ) có thể được dùng để 
sửa lại địa chỉ URI sau: 


form Resource Identifier) có chứa 


http://www.braingia.org/a uri with spaces.htm 


Dia chi URI trên có chứa các khoáng trắng không hợp lệ cho HTTP URI, do đó 
URI cần phải được mã hóa: 


alert(encodeURI("http://www.braingia.org/a uri with spaces.h 


Hinh 8-5 hiển thị kết quả. 


Message from webpage = 


P http://www. braingia.org/a%20uri220with %420spaces.htm 


r 


óa düng dia chi URI trong JavaScript. 


` 
HÌNH 8-5 Sử dụng phương thức encodeUR 


Trong khi phương thức encodeURI m việc ới toàn bộ URI, như trong Hình 8- 
5, phương thức encodeURICompone i làm việc trên một phần của URI, 
như phần ⁄a uri with spaces.htm trong ví du trên. 


Cả 2 phương thức encodeURI() và URIComponent ( ) đều có các phương thức 
giải mã tương ứng là decodeURI( ) và decodeURIComponent ( ). 


Sử dung phương thức eva1( ) 


Phương thức eva1( ) là một trong những phương thức manh nhưng cũng nguy 
hiểm trong JavaScript. Phương thức evaT( ) nhận vào một đối số sẽ được thông 
dịch và thực thi bởi JavaScript, ví dụ: 


eval("alert('helloworld')"); 


Phuong thức eval() thuc thi đoạn mã alert, giống nhu khi đoạn mã đó được 
thực thi trực tiếp. Thông thường, bạn sử dụng eval( ) khi gọi AJAX, tuy nhiên 
việc đó sẽ gây ra vấn đề bảo mật vì đoạn mã trả về từ lời gọi AJAX có thể thực 
thi như các đoạn mã thông thường trong khi nó có thể là mã độc. 


Bài táp 


1. Viết đoạn mã dé duyệt từng phần tử của một mảng có bốn phần tử nhu bên 
dưới và hiển thị chúng bằng hộp thoại alert(), mỗi phần tử một hộp 
thoại: 


var star = ["Polaris","Deneb","Vega", "Altair"]; 


2. Tao một đối tượng chứa tên ba bài hát yêu thích của ban. Đối tượng này cần 
có những thuộc tính như tên nghệ sĩ, độ dài, tựa đề cho từng bài hát. 


3. Sau đây là ví dụ về danh sách các ngôi sao và lớp tạo ra các đối tượng này: 


function Star (constell, type, specclass,magnitude) { 
this.constellation = constell; 
this.type - type; 
this.spectralClass - specclass; 
this.mag - magni 


} 
star["Polaris"]- new St ("urs 


star["Mizar"]- new Star ajor","Spectroscopic Binar) 
star["Aldebaran"]- new Sta aurus","Irregular Variable", 
star["Rigel"]- new Star("Orion","Supergiant with Companior 
star["Castor"]|- new Star("Gemini"," "Multiple/Spectroscopic' 


Minor","Double Cephe1d”, "I 


star["Albireo"]- new Star( "Cygnus”, "Double"”", “K3 II"'",3.1); 
star[ "Acrux”]= new Star("Crux", "Double","B1 IV",0.8); 

star["Gemma"]|- new Star("Corona Borealis","Eclipsing Bina! 
star["Procyon"]- new Star("'Canis Minor","Double","F5 TV",( 
star["Sirius"]|- new Star("Canis Major","Double","A1 V",-1. 
star["Rigil Kentaurus"]- new Star("Centaurus", "Double", "G: 
star["Deneb"]- new Star("Cygnus", 'Supergiant","A2 Ia",1.2: 


star["Vega"]- new Star("Lyra"," "White Dwarf","AO V",0.03); 


star["Altair"]- new Star("Aquila"," "White Dwarf","A7 V",0.; 


Đoạn má sử dung vòng lặp for đơn giản để duyệt qua từng đối tượng star và 
hiển thị tên của chúng: 


for (var propt in star) { 
alert(propt); 
} 


Nhiệm vụ của bạn là sửa đoạn mã này để chi hiển thị một hộp thoại thông báo 
chứa tất cả tên các ngôi sao thay vì hiến thị mỗi ngôi sao một hộp thoại. 


Chuong 9 
Mô hình đổi tượng trinh duyệt 


Sau khi đọc xong chương này, bạn có thể: 


= Hiểu về các đối tượng con có sẵn trong đối tượng window. 

» Sử dụng đối tượng navigator dé xem các thuộc tính trong trình duyệt của 
người dùng. 

= Lấy thông tin chiều cao và chiều rộng của màn hình khách truy cập. 

= Sử dụng JavaScript để kiểm tra trình duyệt có đang bật Java không. 

= Phân tích chuỗi truy vấn gửi từ trình duyệt. 


Giới thiệu về t uyệt 


Trước chương này, bạn chủ yếu tiếp cận lý thuyết về JavaScript. Từ chương này 
trở đi, chúng ta sẽ bắt đầu xem JavaScript được áp dụng vào thực tế ra sao. 


Có một thực tế hiển nhiên nhưng rất quan trọng mà chúng ta cần nhắc lại: Trình 
duyệt là trung tâm trong lập trình JavaScript. Những dự án như Rhino 
(http://www.mozilla.org/rhino/) muốn thay đổi điều này, nhưng việc hiểu môi 
trường mà trình duyệt cung cấp là yếu tố quyết định để viết những đoạn mã 
JavaScript có thể chạy tốt trên nhiều loại trình duyệt và nền tảng khác nhau. 
Phần này sẽ giới thiệu với bạn về Mô hình đối tượng trình duyệt (Browser 
Object Model - BOM). 


Hệ thông phân cáp cua trình duyệt 

Mô hình đối tượng trình duyệt tạo ra một hệ thống phân cấp đối tượng theo hình 
cây, rất nhiều trong số đó cung cấp các thuộc tính và phương thức cho lập trình 
viên JavaScript. Bản thân trình duyệt được biểu diễn bởi một đối tượng gọi là 


window. Đối tượng window có một số đối tượng con sau: 


document 
frames 
h1story 
location 
navigator 
screen 


self/window/parent 


Đối tượng con document của window khá đặc biệt vi nó có thêm một số đối 
tượng con khác, thậm chí cả các đối tượng cháu. Hình 9-1 minh họa đối tượng 
window, các đối tượng con và vi trí của chúng trong cây phân cấp. 


: p s : 

(8) Location, Location, Location - Mozilla Firefox kakai x 
File Edit View History Bookmarks Tools Help 

< - (E A http://www, braingia.org/lacation.html * dii Es | ~ Google 2 

Location, Location, Location T ~ 
hash: 

host: www.braingia. org 

hostname: www.braingia. org 

href http:www.bramgia.org/locaton.htrnl 

pathname: /location. html 

port: | 
protocol: http: 

search: 

reload: function reload() ( [native code] ) 

replace: function replace() ( [native code] ) 

assign: function assign() ( [native code] } k 
Done ¿ 


HINH 9-1 Đối tượng window và đối tượng con của nó. 


Chúng ta sẽ thảo luận về đối tượng document trong một chương riêng — 


^ 


Chương 10 “Mô hinh đối tượng tài liệu”. Chương này sé giới thiệu về các đối 
tượng con khác của đối tượng window. 


- ^ 
Su kién 

Sự kiện đã được giới thiệu sơ lược trong Chương 1 - “Hiểu hơn về JavaScript”. 
Bạn cần dùng nhiều đến sự kiện khi lập trình JavaScript và làm việc với các 
form trên web. Sự kiện xảy ra khi một hành động xảy ra. Hành động này có thể 
bắt nguồn từ người dùng khi họ nhấn vào một nút hay một đường liên kết hoặc 
di chuyển con trỏ chuột ra hoặc vào một vùng nào đó. Sự kiện cũng có thể bắt 
nguồn từ những sự kiện của ứng dụng, ví dụ khi trang web đang tải. Chương 11 
“Các sự kiện trong JavaScript và làm việc với trình duyệt” sẽ trình bày chỉ tiết 
hơn về các sự kiện liên quan đến đối tượng window; Chương 14 “Sử dung 
JavaScript với Web Form” cung cấp nhiều thông tin hơn về form web. 


Bàn luận vé đối tương window 


Đối tượng window là đối tượng to ới cửa sổ đang mở trong trình 
duyệt. Đối tượng window có một vài inh, phương thức và đối tượng con. 
Bạn đã sử dụng một số phương thức này như alert() và prompt(). Vi 
window là đối tượng toàn cuc nên bạn không cần đặt từ window trước các thuộc 
tính và phương thức. Thay vào đó, bạn có thể trực tiếp gọi chúng như trong các 
ví dụ goi tháng đến phương thức alert(). 


Các đối tượng con cháu trực tiếp của window không cần phải có tiền tố window, 
nhưng khi làm việc với các đối tượng không phải là đối tượng con cháu trực tiếp 
của window, bạn cần thêm tên đối tượng window trước nó. Ví dụ, đối tượng 
document là đối tượng con trực tiếp của đối tượng window do đó không cần 
thêm tiền tố window, nhưng những đối tượng con cháu của document thì cần 
nhu trong ví dụ dưới đây: 


alert("something"); // không cần tiền tố window. 
document.forms[@] // cần tiền tố document. nhưng không cần w: 


Đối tượng window cũng có các thuộc tính và phương thức. Trong số các thuộc 
tính đó có những thuộc tính tự thân, tức là những thuộc tính thuộc vé window. 


Bảng 9-1 liệt kê những thuộc tính thường dùng của đối tượng window. Ban sé 
tìm hiếu các thuộc tính này thông qua các ví dụ xuyên suốt cuốn sách. 


BẢNG 9-1 Những thuộc tính của đối tượng window. 


Thuộc tính Mô tả 

closed Có giá tri Erue khi cửa sổ bi đóng. 

defaultStatus Dùng để thiết lập dòng chữ mặc dinh trên thanh trạng thái của trình duyệt. 
name Tên của cửa sổ khi nó mới mở ra lần đầu. 

opener Tham chiếu đến cửa sổ tao ra nó. 

parent Thường dùng để chỉ frame/window cha chứa/sinh ra frame/window hiện tại. 
status Thường dùng để thiết lập đoạn văn bản sẽ hiên thị trên thanh trang thái khi 


người dùng di chuột qua một phần tử, ví dụ như đường liên kết. 
top Chỉ cửa sổ cha ở trên cùng. 


Bảng 9-2 và 9-3 mô tả một số phương thức của đối tượng window. Ban sẽ biết 
cách sử dụng những phương thức này thông qua các ví dụ trong phần còn lại của 
cuốn sách. 


BẢNG 9-2 Một số phương thức củ window. 


Phuong thüc Mô tả 

: Phương thức tao hàm xử ly sự kiện trên các trinh duyệt (trừ 
addEventL1stener () Windows Internet Explorer). Xem Chương 11 để biết thêm. 

Phiên bản của addEventListener() trong Internet Explorer. Xem 

attachEvent ( ) Chuong 11 dé biét thém. 
blur() Thay đổi tiêu điểm của bàn phím ra khói cửa số trình duyệt. 
focus() Chuyển tiêu điểm của bàn phím vào cửa sô trình duyệt. 
close() Đóng cửa sổ trình duyệt. 
detachEvent ( ) Phiên bản của removeEventListener() trong Internet Explorer. 


Phương thức bó hàm xử lý su kiện trên các trình duyệt (trừ 
Internet Explorer. 


open( ) Mở một cửa sổ. 


removeEventL1stener() 


print() Gọi chức năng in từ trình duyệt: xử lý tương tự nhu khi người 
dùng nhãn Print trong trình duyệt. 


Một số phương thức để di chuyển và thay đổi kích cỡ cửa sổ của window được 
mồ tả trong Bảng 9-3. 


BÁNG 9-3 Một số phương thức di chuyển và thay đổi kích thước cửa sõ của đối 
tượng window. 


Phương thức Mô tả 
moveBy( ) Dùng dé di chuyên cua sõ dén vi trí tuong dói. 
moveTox( ) Sir dung dé di chuyén dén mót vi trí nhát dinh. 


resizeBy() Dùng để thay đổi kích cỡ cửa số một lượng bằng giá tri cho trước. 
resizeTo() Dùng để thay đổi kích cỡ cửa sổ đến kích thước nhất định. 


Các phương thức liên quan đến thời gian trong JavaScript sẽ được đề cập trong 
Chương 11. Sau đây là một vài phương thức liên quan đến thời gian của đối 
tượng window: 

" clearTnterval() 

P clearT1meout() 


- setInterval() 


P setT1meout() 


Phần còn lại của chương sẽ đi sâu h 
w1ndow. 


Sc tìm hiểu các đối tượng con của 


Lấy thông tin về màn hình 


Đối tượng screen cung cấp phương thức để lấy thông tin về màn hình của 
người truy cập. Bạn cần những thông tin này để xác định xem nên hiển thị ảnh 
nào hoặc trang web có thể lớn đến đâu để điều chỉnh. Bất kể bạn có sử dụng đối 
tượng screen hay không, bạn vẫn cần tạo một thiết kế CSS cơ bản tốt để hỗ trợ 
mọi kích cỡ màn hình. 


Chú ý Bạn thường thấy đối tượng con của window được coi là thuộc tính — 
ví dụ, thuộc tính screen thường được gọi hơn là đối tượng screen. 


Những thuộc tính sẵn có của đối tượng screen là: 


a availHeight 
- availWidth 
" colorDepth 
a height 


" width 


Bạn có thể sé bán khoăn vé sự khác nhau giữa thuộc tính availHeigh, 
availWidth và thuộc tính height và width. Thuộc tính availHeight và 
availWidth trả về chiều cao và chiều rộng còn lai của màn hình sau khi đã trừ 
đi diện tích được sử dụng bởi các tác vụ điều khiển khác, ví dụ như thanh tác vụ 
của Microsoft Windows. Đối tượng height và width trả về chiều cao và chiều 
rộng của toàn bộ màn hình. Ví dụ sau sẽ giúp bạn hiểu rõ hơn. 


Xác định chiều cao và chiều rộng của màn hình người truy cập 


1. Sử dụng Microsoft Visual Stud 
screen.htm trong thư mục mã n 


oặc trình soạn thảo khác sửa file 
hương 9 phần Tài nguyên di kém. 


2. Thêm vào đoạn mã được in đậm dưỡi đây (file screen.txt, Tài nguyên di 
kẻm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 
<title>Đối tuong Screenc/title» 

</head> 

<body> 

«script type-"text/javascript'» 
alert("Chiéu cao khả dụng: "+ screen.availHeight); 
alert("Tổng chiều cao: "+ screen.height); 
alert("Chiéu rộng khả dụng: "+ screen.availWidth); 
alert( "Tổng chiều rộng: "+ screen.width); 

</script> 


</body> 
</html> 


3. Lưu file và dùng trinh duyệt mở lại. Bạn nhận được bốn hộp thoại thông báo 
ứng với từng thuộc tính được gọi. Hình minh họa dưới đây phản ánh màn 
hình có độ phân giải 1024 x 768. 


À Chiều cao khả dung: 731 


Í Message from webpage me | 


ih. Chiều rộng khả dung: 1184 


À Tổng chiều rộng: 1184 


Như bạn đã thấy, chiều rộng và chiều cao của màn hình lần lượt là 1184 và 771 
pixels. Chú ý rằng chiều rộng khả dụng chỉ còn lại 1184, chiều cao khả dụng 
cũng giảm từ 771 xuống 731 do thanh tác vụ. 


Sử dụng đổi tượng navigator 


Đối tượng navigator cung cấp một số thuộc tính giúp nhận biết các thành phần 
khác nhau của trình duyệt và môi trường của người dùng. Một trong những thao 
tác phổ biến mà JavaScript có thể thực hiện là nhận biết người truy cập đang sử 
dụng trình duyệt nào. (Phần này không trình bày thao tác đó. Xem mục “Các vấn 
đề khi nhận biết trình duyệt” để biết thêm chỉ tiết). 


Các vấn đề khi nhận biết trình duyệt 


Từ rất lâu, các trang web đã sử dụng đối tượng navigator để nhận biết trình 
duyệt của người dùng. (Thời gian dài trong thời đại Internet có thể là một vài 
năm hoặc chỉ là vài tháng, tùy thuộc vào việc chúng ta đang bàn về công nghệ 
nào). Nhận biết trình duyệt là việc làm cần thiết để các đoạn mã viết riêng cho 
từng loại trình duyệt có thể chạy được. Trái với mục đích cơ bản của việc nhận 
biết trình duyệt, một số website thiết kế kém lại sử dụng kỹ thuật này để chặn 
khi người dùng duyệt nó trên một số trình duyệt nhất định. 


Rất ít người biết rằng thông tin gửi qua trình duyệt có thể bị giả mạo. Tiện ích 
The User Agent Switcher của Firefox có thể thay đổi những thông tin này, do đó 
làm cho việc nhận dạng trình duyệt ợng nav1gator trở nên vô tác 
dụng. 


Mách nhỏ Chúng ta đã bàn đến và Ay trước dày và bây giờ chúng ta sẽ 
nói lại (có thể điều này sẽ còn được lặp lại): Đừng bao giờ tin tưởng các 
thông tin được gửi về từ trình duyệt người dùng. Luôn luôn xác thực chúng. 
Tin rằng trình duyệt trả về là Internet Explorer vì thông tin trả về nói thế là 
không đủ. Chương 11 sẽ trình bày một phương thức giúp nhận biết tốt hơn 
liệu trình duyệt có khả năng chạy mã JavaScript trên trang web của bạn hay 
không. 


Khi sử dụng đối tượng navigator để nhận biết trình duyệt, bạn sẽ gặp thêm 
một vấn đề khác vì có rất nhiều loại trình duyệt khác nhau. Lập trình viên web 
có thể sẽ tiêu tốn khá nhiều thời gian để theo dõi xem trình duyệt nào hỗ trợ 
được tính năng nào và cố gắng làm tất cả các tính năng chạy được trên các trình 
duyệt. 


Trong bài tập này bạn sé tìm hiểu các thuộc tính của đối tượng navigator và 
giá trị của chúng. 


Tim hiểu đối tượng navigator 


1. Sử dung Visual Studio, Eclipse hoặc trinh soạn thảo khác sửa file 
naviprops.htm trong thu muc má nguồn mẫu Chương 9 của Tài nguyên di 
kèm. 


2. Thay thế dòng chú thích TODO bằng đoạn mã được in đậm dưới dày (đoạn 
mã này có trong file naviprops.txt của Tài nguyên đi kèm) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Đối tượng Navigator«/title» 
</head> 
<body> 
<script type="text/javascript"> 
//láy các phàn tü báng tên thé 
var body = document.getElementsByTagName( ' 
for (var prop in navigator) { 
// tao mói phàn tü 
.createTextNode(prop-* ":"- 
0endChild(text); //thém nút 
bendChild(elem); 
J 
</script> 
</body> 
</html> 


3. Luu file và dùng trinh duyệt mở lại. Nếu chon Firefox, trang web của ban sé 
giống như hinh dưới: 


rm Edit — History Bookmarks Tools Help 
@ - e x A (L3 http://192.168.1,14/jsbs/c9/naviprops.htm Y + 4- Google P 


| || The navigator Object | + | | - 


^ 


appCodelName: Mozilla 


applName: Netscape 
app Version: 5.0 (Windows; en-US) 


language: en-US 


mimeTypes: [object MimeType Array] 
platform: Win32 

oscpu: Windows NT 6.1 

vendor: 

vendorSub: 

product: Gecko 


productSub: 20100401 


Done 


4. Nếu chon Internet Explorer, ta se g tương tự, tuy vậy hãy chú ý đến 


điểm khác biệt giữa các thuộc tính. 


(Æ The navigator Object - Windows Internet Explorer mem EcE 
G (e) v [E] ntp/7192169:114/s6s/ci/r v | R [8 Bing pr 


>> 


xp Favorites Æ The navigator Object api "] æ v Page Safety Tools * 


appCodeName: Mozilla 

appName: Microsoft Internet Explorer 
appMinor Version: 0 

cpuClass: x86 


platform: Win32 


plugins: [object HTML PluginsCollection] 
opsProfile: null 

userProfile: null 

systemLanguage: en-us 

userLanguage: en-us 


Done @ Internet | Protected Mode: On fà Y "A100 v 


Chúng ta không sử dung hộp thoai alert( ) trong bài tập này, thay vào đó 
chúng ta sé dùng một số hàm mới. Những phần tử trong ví dụ này sé được giới 
thiệu trong Chương 10 và 11. 


Đoạn mã trong bài tập này chứa một hàm, hàm này sử dụng mô hình đối tượng 
tài liéu để tạo ra các phần tử HTML trên trang web. Vòng lặp for được dùng 
để duyệt từng thuộc tính của đối tượng navigator: 


function showProps() { 
var body = document.getElementsByTagName( "body”)[0]; 
for (var prop in navigator) { 
var elem - document.createElement("p"); 
var text = document.createTextNode(prop-* ”:”: 
elem.appendChild(text); 
body.appendChild(elem); 


j 


Nếu đoạn mã JavaSript của bạn không chay được trên một phiên bản của trinh 


duyệt nào đó, ban có thể xử lý băng cách nhận biết trình duyệt thông qua đối 
tượng navigator nhưng cần cân nhắc vì phuong pháp này không thật sự dáng 
tin cậy và nên hạn chế. Tuy vậy, đôi khi bạn lại cần sử dụng phương pháp này. 


Nếu trang web của ban sử dung Java, bạn có thể sử dụng đối tượng navigator 
để kiểm tra Java đã được bật hay chưa. Cách làm như sau: 
Sử dụng đối tượng navigator để nhận biết Java 
1. Sử dụng Visual Studio, Eclipse hoặc trình soạn thảo khác để mở file 
javatest.htm trong thư mục mã nguồn mẫu Chương 9. 


2. Thay thế dòng chú thích TODO bằng đoạn mã được in đậm dưới dày (đoạn 
mã nằm trong file javatest.txt của Tài nguyên đi kèm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Kiểm tra pt có được bát hay không<; 
«script type-"t script"> 
if (naviga avaEnabled()){ 
alert("Java dang duoc bât"); 
}else{ 
alert("Java không duoc bát"); 
</script> 
</head> 
<body> 
</body> 
</html> 


3. Luu file này và xem trên Internet Explorer (neu dà cài dát nó). Mác dinh 
trình duyệt Internet Explorer của ban đã bật Java, ban sẽ thấy hộp thoai 
thông báo như sau: 


4. DOi sang Firefox, tát Java "T A, Firefox của hé điều hành 


Windows, chon Add-Ons ti? menu Tools, chon Plugin và chon Disable For 
the Java Plugins). Khi ban tắt Java, tải lại trang web, ban sẽ thấy một hộp 


thoai nhu sau: 


Firefox 7 


| C) Kim tra Java 


Java không được bắt 


Đối tượng loc 


Đối tượng location cho phép bạn truy cập URI của trang web hiện tai, bao 
gồm bất kỳ thông tin nào về chuỗi truy vấn, giao thức dang sử dung và các thành 
phần liên quan. Đây là ví dụ về URI: 


http://www.braingia.org/location.html 


Nếu trang web ở dia chi URI đó chay đoạn mã JavaScript trong ví du sau, kết 
quả sẽ giống như Hình 9-2. 


E) Location, Location, Location - Mozilla Firefox -a-la | 


Eile Edit View History Bookmarks Tools Help 

e Y (€. A http:/Áwwww.braingia.org/location.html ^ ibi bó ~. Google P 
Location, Location, Location + - 
hash: 

host: www.braingia.org 

hostname: www.braingia. org 

href http //ererw.braingia. org/location.html 


pathname: /location.html 


m 


port: 

protocol: http: 

search: 

reload: function reload() ( [native code] } 
replace: function replace() ( [native code] ) 


assign: function assign() ( [native code] ) 
Done + 


HINH 9-2 Đối tượng location được sử ¡ các thuộc tính khác nhau. 


Giao thức trong trường hợp này là host là www. braingia.org, 
đường dẫn là 1ocation. htm1. Khổ 1á trị nào trong chuỗi truy vấn, vì thế 
giá trị tìm kiếm là rỗng. Cống (port) được dùng là cổng chuẩn cho giao thức 
HTTP, tcp/80, vi thé port cũng mang giá trị rỗng. 


Sau đây là ví dụ về việc sử dụng chuỗi truy vấn. 
Tim hiểu đối tượng location 


1. Sử dụng VisualStudio, Eclipse hoặc một trình soạn thảo khác mở file 
location1.htm trong thư mục mã nguồn mẫu Chương 9 của Tài nguyên di 
kèm. 


2. Phần HTML và JavaScript đầu tiên tạo một trang web như trong Hình 9-2. 
(Thực ra, đây là đoạn mã lẫy từ một ví dụ trước đó cho đối tượng 
navigator và được thay đổi cho đối tượng 1ocation). Chúng ta sử dung 
đoạn mã đó cho bài tập này, bạn hãy thêm đoạn mã in đậm dưới đầy vào 
trang location1.htm: 


<!DOCTYPE HTML PUBLIC "- 
"http://www.w3.org/TR/ht 
«html» 
«head» 

«title»Location, 
</head> 
<body> 


//W3C//DTD HTML 4.01//EN" 
ml4/strict.dtd"» 


Location,Locationc/title» 


«script type-"text/javascript'» 
//láy các phàn tü báng tén thé 
var body = document.getElementsByTagNamev( ' 
for (var prop in location) ( 


</script> 
</body> 
</html> 


. Dùng trình duyệt mở trang web. 


//tao phần tử 

var elem = document.createElementt 
//tao nút văn bản 

var text = 
document.createTextNode(prop+ ":'- 
elem.appendChild(text); //thém phí 
body.appendChild(elem); 


trá vé sé khác nhau tüy thuóc vào 


việc chúng ta cài đặt máy chủ web nào. Ví du này mô tả máy chủ web 
Apache chay trén dia chi IP cuc bó: 192.168.1.14. 


4. Sửa dia chi URI mà ban dùng d 


GQ- [E] http://192.169.1.14/5b5/c9, v | R | +s | x | [8] Bing p ~| 


yp Favorites Æ Location, Location, Loc... 


e Location, Location, Location - Windows Internet Explorer 


I ga v Page v Safety Tools v 


hostname: 192.168.1.14 
href: http-//192.168.1.14/jsbs/c9/locationl htm 
host: 192.168.1.14 
hash: 
port: 
pathname: /jsbs/c9/location1 .htm 
search: 


protocol http: 


Done @ Internet | Protected Mode: On ía - "1006 ~ 


ang web báng cách thém vào mót 
số cáp tham số/giá tri cho chuó í du, URI của môi trường mà tôi 
dùng là http://192.168.1.14/jsb on1.htm. (Môi trường và vi trí ban 
gọi đến file có thể khác ở đây). Sửa địa chỉ URL và thêm vào hai tham 
só,name —Steve và country=US. Bạn có thể thay đổi các tham số bằng tên và 
nước của mình (nếu bạn không phải là người Mỹ). Giá trị bạn chọn ở đây 
không quá quan trọng, vấn đề là bạn sử dụng nhiều hơn một cặp tham số/giá 
trị. Đây là URI hoàn chỉnh http://localhost:1627/Chapter9/location1.htm ? 
name-Steve&country - US. 


. Khi tải lại trang web với tham số vừa thêm vào, thuộc tính search lúc này 
có giá trị như hình sau: 


E Location, Location, Location - Windows Internet Explorer 


OJ v |E) http;//1921686.11455b5/c9, v | à | $2 | x | [8] Bing p | 


3ÿ Favorites Æ Location, Location, Loc... Ta "Eu e] v Page Safety v Tools v 


hostname: 192.168.1.14 
href http-//192.168.1.14/jsbs/c9/locationl htm?name-Steve&country-US 
host: 192.168.1.14 
hash: 
port: 
pathname: /jsbs/c9/location1 htm 
search: ?)name-Steve&country-US 


protocol http: 


Done @ Internet | Protected Mode: On fg v "1005 v 


6. Mở file location1.htm và lưu lą 


7. Sửa file location2.htm dé nó ki 
đối được in đậm, ban có thể tìm th dụ này trong file location2.txt của 
Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title»Location, Location, Locationc/title» 
</head> 
<body> 
<script type="text/javascript"> 
//láy các phàn tü báng tên thé 
var body = document.getElementsByTagNamev( ' 
for (var prop in location) ( 
// tao phần tử 
var elem = document.createElementt 
//tao nút văn bản 
var text = 
document.createTextNode(prop+ ":"- 


elem.appendChild(text); //thém phé 
body.appendChild(elem); 


if(location.search)( 
var querystring- location.search; 
var splits- querystring.split('&': 
for (var 1= 0; 1<splits.length; i- 
var splitpair- splits[i].: 
var elem- document.createt 
var text = document.creatc 
splitpair[0]-* ":"- 
elem.appendChild(text); 
body.appendChild(elem); 


</script> 
</body> 
</html> 


ətion2.htm? 
yêt. Lúc này, ban nhận được một 
đó và thêm các giá trị khác được 


. Chạy đoạn mã bằng cách chỉ đến 
name-Steve&country-US tro 
trang danh sách các thuộc tính 
lấy về từ chuỗi truy vấn như sa 


e Location, Location, Location - Windows Internet Explorer EEEGE" 
QU v (E) hto://192168.1.14/2b2/c9/location2h v | R3 | ++ | x | [E sing P ~| 


y á E » 
3ÿ Favorites | (i Location, Location, Location Tp ov E) 000 de v Pager Safetyv Toos” @~ 


hostname: 192.168.1.14 


href http://192.168.1.14/jsbs/c9/location2.htm?name-Steve&country-US 


host: 192.168.1.14 

hash: 

port: 

pathname: /jsbs/c9/location2 htm 
search: )name-Steve&country- US 
protocol http: 

“name: Steve 


country: US 


@ Internet | Protected Mode: On fa v Q100% ~ 


Chú ý rằng tham số đầu tiên, na u hỏi chấm (2) trong chuỗi truy vấn 
và chúng ta không muốn điều này. Có một số cách để giải quyết vấn đề này. 
Cách đơn giản nhất là sử dụng phương thức substring(). Thay đối biến 
querystring bằng dòng lệnh sau: 


var querystring- location.search.substring(1); 


Phuong thức substring( ) trả về một chuỗi bát đầu từ vi trí đã chon. Trong 
trường hợp này, ký tự đầu tiên của 1ocat 1on. search (tại chỉ số 0) là dẫu hỏi; 
do vậy sử dụng substring() tại chỉ số 1 sẽ giải quyết vấn đề. Đoạn mã cuối 
cùng (với thay đổi là phần in đậm) giống như dưới đây. (Ban có thể tìm thấy 
đoạn mã này trong file location3.txt của Tài nguyên đi kèm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 

«title»Location, Location, Location</title> 
</head> 


«body» 
«script type-z"text/javascript'"» 

var body- document. getElementsByTagN: 

for (var prop in location) ( 
// tạo phần tử 
var elem = document.createEl 
//tao nút văn bản 
var text = 
document.createTextNode(prop: 
elem.appendChild(text); //th: 
body.appendChild(elem); 


if(location.search)( 
var querystring- location. se: 
var splits- querystring.spli 
for (var i= 0; 1<splits.leng 
var splitpair- split: 
var elem- document.c 
var text- document. : 
splitpair [1] 
elem.appendChild(tex 
body .appendChild(elei 


j 

</script> 
</body> 
</html> 


10. Lưu đoạn mã này thành file location3.htm và mở lai. Nhìn vào kết quả, 
chúng ta sẽ thấy dấu hỏi chấm đã biến mất. 


E Location, Location, Location - Windows Internet Explorer IEEBEGE | 
@ tag w |£ | http://192.168.1.14/jsbs/c9/location2.h | R (1 Bing 5x 


y Favorites Æ Location, Location, Location d ] = v Page Safetyv Tools v e- a 


hostname: 192.168.1.14 

href: http-//192.168.1.14/jsbs/c9/location2.htm?name=Steve&country=US 
host: 192.168.1.14 

hash: 

port: 

pathname: /Jsbs/c9/locaton2 htm 

search: ?name-Steve&country-US 

protocol: http: 

name: Steve 


country: US 


Done @ Internet | Protected Mode: On /g w "&i1006 - 


Vi trí này cũng có thể được thiết lập bằng cách sử dụng đối tượng location của 
JavaScript. Thông thường, chúng ta sử dụng phương thức assign( ) của đối 
tượng 1ocation. Ví dụ, để chuyển hướng tới một trang web khác, có thể dùng 
đoạn mã sau: 


location.assign("http://www.braingia.org"); 


Gọi phuong thức assign( ) cũng giống như việc thiết lập giá tri cho thuộc tính 
href: 


location.href= "http://www.braingia.org"; 


Ban cũng có thé thay đổi các thuộc tính khác của đối tượng 1ocation nhu 
công, chuỗi truy vấn hay đường dẫn. Ví du, để lập đường dẫn đến ⁄b1og, ⁄„ 
bạn làm như sau: 


location.pathname- "blog"; 


Đối chuỗi truy vẫn sang ?name-Steve làm như sau: 


location.search- "?name-Steve'"; 
Gọi phương thức reload() để tải lại trang web. 
location.reload(); 


Khi bạn goi Zocation.reload(),trinh duyệt sẽ tải lai trang web từ bó lưu trữ 
tạm thời (cache) chứ không tạo một yêu cầu đến máy chủ. Tuy vậy, nếu truyền 
vào một giá tri Boolean true vào hàm, trình duyệt sé nạp lai trang từ máy chủ: 


location.reload(true); 


Chú ý Hãy thận trọng khi sử dung phương thức re1oad( ). Việc cố gắng tải 


lại trang trong mã, trái ngược với việc tải lại dựa vào hàm bẫy sự kiện (hay 
hàm lắng nghe sự kiện) rất dễ dẫn đến chu trình lặp liên tục. 


Đối tượng histo 


Đối tượng history cung cấp phuc fh di chuyén dén các trang truóc hay 
sau trang hiện tại trong lịch sử truy 7 nhiên, vi lý do bảo mật, JavaScript 
không thể truy cập URI của những site mà trình duyệt đã ghé thăm. Cụ thể, bạn 
có thể sử dụng phương thức back(), forward() và go( ). Phương thức 
back() trả về trang trước đó còn forward( ) trả về trang kế tiếp. Phương thức 
go( ) di chuyển đến giá trị chỉ số (chính là đối số của phương thức). 


Chú ý Nếu ứng dụng không đi đến những trang khác hay vị trí khác trong 
thanh địa chỉ, bộ nhớ trình duyệt sẽ không lưu những trang này và không thể 


dùng với những phương thức bên trên. 


Dưới đây là đoạn mã nguồn mẫu thực hiện thao tác quay trở lại trang web trước 
đó và tiến đến trang web sau đó. Những ví dụ trong các chương sau sẽ mô tả chỉ 
tiết làm thế nào để áp dụng những đoạn mã này trong thực tế. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 


«head» 
<title>Đối tượng history«c/title» 
«script type-"text/javascript'» 
function moveBack()[//Chuyén đến trang trước 
history.back(); 
} 


function moveForward(){ //Chuyén dén trang t. 
history.forward(); 


</script> 
</head> 
<body> 
<p><a href="#" onclick="moveBack()">Nhãn vào dé trở về trang 


<p><a href="#" onclick-"moveForward()"»Nhán vào để tới trang 
</body> 
</html> 


Chú ý Đoạn mã trên sử dung hàm xử lý sự kiện tại chó (onclick), khuyến 
cáo không nên dùng hàm này ch à JavaScript tiện lợi vì các hàm 
xử lý sự kiện sẽ chèn hành vi và . Cách sử dụng onclick ở đầy 
chỉ có mục đích minh họa để trá thiệu khái niệm hàm xử lý sự 
kiện sẽ được bàn đến trong Chươn 


Khai báo hàm xử lý 


HTML 5.0 giới thiệu hai phương thức mới của đối tượng navigator: 
registerContentHandler() và registerProtocolHandler(). Sử 
dụng những phương thức này, website có thể đăng ký URI để xử lý một số 
loại thông tin nhất định như là RSS feed. Tuy nhiên, vì các phương pháp này 
chưa được hỗ trợ rộng rãi, nên chúng ta sẽ không đề cập đến trong cuốn sách 
này. 


Bài tập 


1. Sử dụng phương thức availHeight và availWidth dé xác định liệu màn 


hinh có chiều cao tối thiểu là 768 pixel và rộng tối thiểu là 1024 pixel không. 
Nếu không, hiển thị hộp thoại thông báo kích cỡ của màn hình. 


. Sửa bài tập đã được trình bày trong nội dung chương, sử dụng đối tượng 
location để hiển thị hộp thoại alert ( ) dựa vào giá trị của chuỗi truy vấn. 
Cụ thể, hiến thị từ “Obrigado” nếu nước được nhắc đến là Brazil, hiển thị 
“Thank you” nếu là nước Anh (Great Britain). Kiểm tra những điều kiện đó. 


. Cài đặt add-on User Agent Switcher lén Firefox hay add-on tuong tự lên 
Internet Explorer. Tiếp đó sử dung đoạn mã trong bài tập “Tìm hiểu đối 
tượng navigator" trước đó và thử nghiệm với nhiều giá trị khác nhau. Bài 
tập này giúp bạn hiểu tại sao không nên chỉ sử dụng đối tượng navigator 
để xác định độ tương thích của trình duyệt. Chú ý: Bạn có thể tự chọn trình 
duyệt. 


Phần 3 
Tích hop JavaScript vào thiét ké 
trang 


Chương 10: Mô hình đối tượng tài liệu 

Chương 11: Các sự kiện trong JavaScript và làm việc với trình duyệt 
Chương 12: Tao và sử dung cookie 

Chương 13: Làm việc với hình ảnh trong JavaScript 


Chương 14: Sử dụng JavaScript với Wi 


Chương 15: JavaScript và CSS 


Chương 16: Xử lý lỗi trong JavaSc 


Chương 10 
Mô hình đổi tượng tài liệu 
Sau khi đọc xong chương này, bạn có thể: 


= Sử dụng Mô hình đối tượng tài liệu (DOM) để truy xuất các phần tử của một 
tài liệu. 

» Tạo thêm các phần tử mới trong một tài liệu 

» Thay đổi các phần tử trong một tài liệu. 


= Xóa các phần tử trong một tài liệu. 


Mô hình đổi tượng tài liệu 


DƠM hay Mô hình đối tượng tài liệu là một chuẩn được định nghĩa bởi Tổ chức 
Web Toàn Cầu (World Wide Web Consortium - W3C). DOM cung cấp cách thức 
để truy cập và thay đổi nội dung của các tài liệu HTML. Phần lớn các trình duyệt 
web hiện này đều triển khai DOM dưới nhiều hình thức và mức độ khác nhau. 


Cũng như rất nhiều chuẩn khác, đặc biệt các chuẩn liên quan đến lập trình web, 
DOM được phát triển và cải tiến qua nhiều năm. Hiện có ba đặc tả DOM, được 
øọi là các cấp độ của DOM, đặc tả thứ tư hiện dang được phát triển. 


Cần nhấn mạnh rằng DOM mạnh hơn tất cả những gi sẽ được trinh bày trong 
chương này hay thậm chí trong cuốn sách này. Bạn có thể dùng DOM cho nhiều 
mục đích khác ngoài việc lập trình JavaScript. Cuốn sách này chỉ tập trung vào 
việc bạn sẽ dùng JavaScript như thế nào để truy cập và xử lý DOM. 


Khi nhắc tới DOM, tôi sẽ tập trung vz 
tại chứ không bàn rộng ra các khái 
sách này sẽ tập trung trinh bày cácl 
cây. Tất nhiên, DOM cũng xử lý cá 
đây là cuốn sách về JavaScript nên trưó 
hệ giữa DOM và HTML. 


quan hé của nó với công việc hiện 
uan trong DOM. Cháng hạn, cuốn 
xếp các tài liệu HTML dưới dang 
ML theo cách tương tự, nhưng vì 
lên chúng ta sẽ chú tâm vào mối quan 


Dé tìm thêm thông tin vé DOM, hãy đọc kỹ đặc tả DOM trên website của W3C 
tại dia chỉ: http://www.w3.org/DOM/. 


Chú ý Ví dụ trong chương này sử dụng các hàm xử lý sự kiện tại chỗ (hay 
còn gọi là hàm xử lý sự kiện nội tuyến - hàm viết ngay trong thẻ html) nhu 
hàm onload được gắn vào thẻ «body» và hàm onclick được gắn vào rất 


nhiều thẻ HTML khác. Việc sử dụng các hàm tại chỗ không phải là một thói 
quen tốt và chỉ được dùng với mục đích minh họa. Chương 11 ”Các sự kiện 
trong JavaScript và làm việc với trình duyệt” sẽ giới thiệu cách tốt hơn để 
gắn các sự kiện vào mã HTML. 


DOM cáp dó 0: DOM So khai 


DOM cáp độ 0 được triển khai trước khi tất cả các đặc tả chính thức khác về 
DOM ra đời. Sau khi DOM cấp độ 1 được định nghĩa, các công nghệ liên quan 
đến việc viết mã kịch bán cho tài liệu trước đây được hệ thống hóa thành DOM 
cấp độ 0 (dù khi đó chưa có tổ chức về chuẩn nào chính thức công nhận điều 
này). Hiện nay, tất cả các trình duyệt phổ biến vẫn hỗ trợ các thành phần của 
DOM cấp độ 0 nhằm đảm bảo khả năng tương thích ngược. Tất nhiên, bạn 
không bao giờ muốn những đoạn mã viết từ năm 1998 không chạy được trên 
trình duyệt đương thời. 


DOM cấp độ 0 tập trung chủ yếu vào việc truy cập đến các phần tử trên form, 
ngoài ra nó cũng hỗ trợ truy cập vào các liên kết và hình ảnh. Chương 14 “Sử 
dụng JavaScript với Web Form” sẽ nói về form và cách truy cập chúng bằng 
DOM. Ở đây, thay vi dành thời gian cho các ví du về DOM cấp độ 0, tôi sẽ tập 
trung hơn vào DOM cấp độ 1 và 2 bởi bạn sẽ chủ yếu sử dụng chúng khi lập 
trình với JavaScript. 


DOM cấp độ 1 và 


Tổ chức W3C ra mắt đặc tả cấp độ vào năm 1998. Cũng như DOM 
cấp độ 0, DOM cấp độ 1 được hỗ trợ dưới nhiều hình thức khác nhau bởi tất cả 
các trình duyệt chính. DOM cấp độ 2 được giới thiệu chính thức vào năm 2000. 
Việc hỗ trợ cho DOM cấp độ 2 tương đối khác nhau giữa các trình duyệt. Có thể 
nói, các phiên bản của các trình duyệt đều hỗ trợ DOM ở mức độ khác nhau. 


Các phiên bản của IE trước phiên bản 9 đều công bố hỗ trợ DOM, nhưng theo 
cách khác với những trình duyệt khác. Kết quả là, bạn phải luôn ghi nhớ tính 
năng DOM mà bạn đang sử dụng trong mã JavaScript có thể không hoạt động 
trên IE hoặc dùng được trên IE nhung lại không hoạt động trên các trình duyệt 
khác. IE phiên bản 9 trên Windows là một bước đi đúng hướng, nhung bạn vẫn 
phải để ý đến vấn đề tương thích giữa các trình duyệt. Tôi sẽ cố gắng chỉ ra 
những khác biệt trong cách thực thi DOM của các trình duyệt và cách xử lý vấn 
đề. 


DOM và cấu trúc cây 


DOM trình bày tài liệu HTML theo cấu trúc cây ngược. Xem xét tài liệu HTML 


đơn giản trong Ví du 10-1. 
VÍ DU 10-1 Tài lieu HTML don gián 


«html» 

«head» 

<title>Hello world </title> 

«/head» 

«body» 

<p>Văn bán 1</p> 

<P>Văn bản 2«/P» 

<p>Liên kết đến «a hrefz"http://www.w3.org"»w3«/a»«/p» 
</body> 

«/html» 


Hình 10-1 trinh bày tài lieu HTML trong Ví dụ 10-1 theo cấu trúc cây ngược của 
DOM. 
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Hình 10-1 Tài liệu don giản được trình bày dưới dang cấu trúc cây. 


Nhiều phần tử HTML có thể có các thuộc tính, chăng hạn trong ví dụ 10.1, phần 
tử <a> có thuộc tính href. Trong phần sau của chương này, bạn sẽ được học 
cách truy xuất và thiết lập giá trị cho các thuộc tính này bằng DOM. 


Khi làm việc với DOM, bạn cần phân biệt rõ ràng việc truy xuất phần tử, thiết 
lập giá trị cho phần tử và xóa các phần tử. Phương thức làm việc với các phần tử 
của DOM sẽ phản ánh sự khác biệt này. 


R SA Za z 
Làm việc với các nút 

Các phần tử trên cấu trúc cây đôi khi được gọi là các nút hay các đối tượng nút. 
Các nút bên dưới một nút khác được gọi là nút con. Cháng hạn, trên Hinh 10-1, 
nút body có ba nút con, đều là các phần tử p và một trong số các nút p có một 
nút con a. Nút body được gọi là nút cha của các nút p. Bất cứ nút nào nằm dưới 
một nút nhất định đều được gọi là con của nút đó. Ba nút p trong Hình 10-1 
được gọi là anh em vì chúng cùng cấp 


Tương tự như cách làm việc với cá la DOM, bạn cũng dùng phương 
thức để làm việc với các nút. Cháng dùng appendChild() để thêm 
nút vào một nút cha có sẵn (xem ví dụ ở Phần sau của chương này). 


Truy xuất các phần tử 


Truy xuất các phần tử của tài liệu là một trong những thao tác cơ bản khi sử 
dụng DOM trong lập trình với JavaScript. Trong phần này, chúng ta sẽ xem xét 
hai trong các phương thức cơ bản được dùng để truy xuất các phần tử: 
getElementById() và getElementsByTagName:( ). 


Truy xuất phần tử bằng ID 

Phương thức getE1ementByTd( ) là một trong những phương thức cơ bản của 
DOM, truy xuất các phần tử xác định của một tài liệu HTML và trả về tham 
chiếu đến phần tử đó. Phần tử phải có thuộc tính 1d để được truy xuất bằng 
phương thức này. Cháng hạn, bạn có thể thêm thuộc tính id cho phần tử a trong 


đoạn mã HTML ở Ví dụ 10-1 như phần in đậm dưới đây: 


«html» 

«head» 

<t1tle>Hello world </title> 

</head> 

<body> 

<p>Văn bån 1</p> 

<p>Văn bån 2</p> 

<p>Liên kết đến «a id-"w3link" hrefz"http://www.w3.org"»W3«/i 
</body> 

</html> 


Giờ thi a đã có id và có thể được truy xuất nó bằng phương thức 
getElementById() như sau: 


var a1 = document.getElementById("wS3link"); 


Tham chiếu đến phần tử có ID là w31ink sẽ được đặt trong biến a1 của đoạn mã 
JavaScript. 


Tất cả các phần tử HTML đều hỗ ti 
trợ truy xuất các phần tử này. Trong 
ID nên chúng ta có thể truy xuất chúng bé 


h 1d, nhờ đó JavaScript sẽ luôn hỗ 
theo, tất cả các phần tử p đều có 
g phương thức getE1ementBy1Td(). 


«html» 

«head» 

<title>Hello world«/title-» 

«body» 

«p id-"sometext"»Ván bán 1</p> 

«p 1d="moretext">Văn bán 2</p> 

«p id-"linkp"»Lién kết đến «a id-"w3link" hrefz"http://www.wW. 
</body> 

«/html» 


Các phần tử «p» được truy xuất nhu sau: 

var p1 = document.getElementById("sometext"); 
var p2 - document.getElementById("moretext"); 
var plink - document.getElementById("linkp"); 


Bạn có thể làm gi với các phần tử này sau khi truy xuất? Với các phần tử nhu a, 
ban có thé truy cập các thuộc tính của nó bằng cách lẫy giá trị của thuộc tính 


href, nhu sau: Đoạn mã này cũng có thể được tìm thấy trong file 
getelement.htm của phần Tài nguyên di kèm. 


«html» 
«head» 
<title>Truy xuất bằng ID«/title» 
«script type="”text/Javascript”> 
function checkhref() { 
var a1 = document.getElementById("wS3link"); 
alert(a1.href); 
J 
</script> 
</head> 


<body onload="checkhref()"> 

<p id="sometext">Văn bån 1</p> 

<p id="moretext">Văn bån 2</p> 

«p id="linkp">Liên kết dén <a id="w3link" herfz"http://www.wW. 
</body> 

</html> 


Trang html chứa đoạn mã này sé hi jI ộp thoại thông báo thuộc tính 
href của phần tử a như trong Hìn 


A http://www.w3.org 


Vi ————— ——Ó — /ơ 
Hình 10-2 Thuộc tính href được truy xuất nhờ phương thức getElementById() 


P4 


Phần sau của chương này sé trinh bày thêm về cách thay đổi các phần tử và các 
thuộc tính. 


Chú ý về thuộc tính innerHTML 


Một trong số cách thay đổi văn bản của phần tử là sử dụng thuộc tính 
innerHTML. Thuộc tính innerHTML cho phép truy cập văn bản của những 
phần tử như p một cách nhanh chóng và dễ dàng. Trên thực tế, dù nhiều 
người có thể không thích thuộc tính này song họ vẫn phải dùng nó vì nó 
thực sự hoạt động rất hiệu quả. 


Vấn đề duy nhất với innerHTML là nó không dugcW3C định nghĩa một 
cách chính thức vì vậy nó không được hỗ trợ trên tất cả các trình duyệt như 
các đối tượng cụ thể khác trong DOM. Tuy nhiên, innerHTML sẽ sớm xuất 
hiện trong đặc tả HTML 5.0 và với việc thực thi khó lường trong các cấp 
DOM hiện tại, một đặc tà DOM chính thức cho thuộc tính này sẽ luôn cần 
thiết. Phần lớn các trình duyệt đều hỗ trợ innerHTML - theo cách khá thống 
nhất. 


Hãy xem xét ví dụ sau (bạn cũng ; nó trong file innerhtml.htm của 
Tài nguyên đi kèm. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 


<title>Truy xuất bằng ID«/title» 

«script type-"text/javascript'» 

function changetext() { 
var p1 = document.getElementById("sometex 
alert(pi.innerHTML); 
pi.innerHTML = "Văn bản 1 đã thay đổi."; 


</script> 
</head> 
«body onload="changetext()"> 
<p id="sometext">Văn bån 1</p> 
<p id="moretext">Văn bån 2</p> 
<p id-"linkp"»Lién kết d&n <a id="w3link" herfz"http://www. 
</body> 
</html> 


Hàm changetext ( ) truy xuất phần tử với ID là sometext, sau đó gán tham 
chiếu đến phần tử này cho biến p1, sử dung câu lệnh sau: 


var p1 = document.getElementById("sometext"); 


Sau đó, thuộc tính innerHTML được gọi, kết quả là một hộp thoại 
alert(). 


A is B| 1. 
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Message from webp, 
Vinbin? 


x xt d Vin binl 
Lis kid W À th 


Chú ý hộp thoai alert() và dòng đầu tiên trên cửa sõ nền: Khi người dùng 
nhấn OK, hộp thoai alert ( ) sẽ biến mất, dòng lệnh JavaScript tiếp theo 

được thực thi, sử dụng thuộc tính innerHTML để thay đổi văn bản của phần 
tử p đầu tiên thành “Văn bản 1 đã thay đổi”. Kết quả được hiển thị như sau: 


NJ E Myllualhntlear f * 3 X | B TuyuttbuD AX 
Văn bàn 1 dä thay lồ 
Vin bán 2 


Liên két dén W3 


Truy xuát báng tên thé HTML 


Phuong thức getE1ementById( ) rất hữu dung khi ban chi cần truy xuất một 
hoặc vài phần tử. Tuy nhiên, nếu ban muốn truy xuất nhiều phần tử cùng lúc thi 


dùng phương thức getE1ementsByTagName ( ) sẽ tốt hơn nhiều. 


Phương thức getE1ementsByTagName ( ) trả về một mảng hoặc danh sách tất 
cả các phần tử có tên thẻ trùng với tên thé trong tham số. Ví du, để truy xuất tất 
cá các hinh ảnh (thẻ <img>) trong một tài liệu, ban viết đoạn mã sau: 


var images - document.getElementsByTagName("img"); 


Tiếp theo, ban có thể xem xét tất cả các thuộc tính của phần tử img chứa trong 
biến images bằng cách duyệt qua tất cả phần tử. 


Sau đây là ví dụ về việc chinh sửa một bảng. Đoạn mã này đổi màu nền của các 
phần tử £d bên trong bảng khi người dùng nhãn vào liên kết Nhân vào để đổi 
màu. Ban có thể tìm thấy đoạn mã trong file getbytagname.htm của Tài nguyên 
đi kèm. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Tên thẻ</ti 
«script type="text ipt"> 
function changecolo //thay dói màu 
var a1 - document.getElementsByTagName("td") 
var adLength = a1.length; // Truy xuất chiều 
for (var i = 0; i < aiLength; i++) { 
a1[1].style.background = "£Zaaabba"; 
J 
</script> 
</head> 
<body> 


<table id="mytable" border="1"> 

<tr><td id-"lefttdO"»Cót Trái</td><td 1d="righttd0">Cột Phải: 
<tr><td 1d="lefttd1">Cột Trái«/td»«td 1d="righttd1">Cột Phải: 
<tr><td 1d="lefttd2">Cột Trái</td><td 1d="righttd2">Cột Phải: 
</table> 

«a href="#" onclick="return changecolors();"»Nhán vào dé dói 
</body> 

«/html» 


Hinh 10-3 là giao diện của trang web khi được mở trên trình duyệt. 


Nhân vào dé dôi màu 


Hình 10-3 Sử dung phuong thức `getElementsByTagName()` để dinh dạng các phần tử trong 
một bảng. 


Khi người dùng nhấn vào liên kết, màu nền của các ô trong bảng sẽ thay đổi như 
trong Hình 10-4. 


0 à http/localhostlear D * È X Ta Thi 1— ME 


Nhân vào de dot màu 


Hình 10-4 Sau khi người dùng nhấn vào liên kết, màu nền của các 6 trong bảng thay đổi. 


Xem xét đoạn mã, bạn sẽ thấy ở vị trí <head> của trang web có đoạn mã 
JavaScript tạo hàm tên là changecolors( ) (thay đối màu). 


function changecolors() { 


Hàm này truy xuất tất cả các phần tử £d bằng cách sử dụng phương thức 
getE.1ementsByTagName ( ), rồi đặt chúng vào mảng a1: 


var a1 = document.getElementsByTagName("td"); 


Tiếp đó, sử dụng vòng lặp for duyệt qua tất cả các phần tử của mảng. Đoạn mã 
trên dùng biến a1Length biến này chứa độ dài của mảng a1 trong câu lệnh gán 
ngay bên trên vòng for. 


Bên trong vòng for, từng dòng lệnh thay đổi màu nén của mỗi phần tử thành 
#aaabba, gam màu xanh lam. Thông thường, bạn nên sử dụng CSS để thay đổi 
định dạng cho các phần tử HTML thay vì thay đổi từng thuộc tính một như trong 
ví dụ trên. Song, trước khi bạn học về CSS và JavaScript trong Chương 15 
“JavaScript và CSS”, cách vừa rồi là đủ. 


for (var i = 0; i < aiLength; i++) { 
a1[1].style.background = "#aaabba"”; 
} 


Liên kết gọi đến hàm changecolors( ) nhờ sự kiện onclick: 


«a href="#" onclick="return changecolors();"»Nhán vào để đổi 


Chú ý Sự kiện onclick, onload và các sự kiện khác được mô tả đầy đủ 
trong Chương 11. 


àm thế nào để thay đổi màu cho tất cả 
đó một cách dễ dàng bằng cách 
ng Chương 15. 


Sau ví dụ này, nhiều người sẽ đặt câ 
các dòng khác trong bảng. Ban có t 
sử dụng JavaScript và CSS theo hư 


Các tập hợp (collection) trong HTML 
Có nhiều đối tượng chứa một nhóm các phần tử trong một tài liệu. Các đối tượng 
này bao gồm: 

= document.anchors Nhóm chứa tất cả các phần tử có tên là «a». 

= document.forms Nhóm chứa tất cả phần tử có tên là «form». 

= document.images Nhóm chứa tất cả phần tử có tên là <img>. 


= document.links Nhóm chứa tất cả phần tử có tên là «a» và có chứa thuộc 
tính href. 


Làm việc với các phần tử anh em 
JavaScript chứa các phương thức và thuộc tính để xử lý mối quan hệ cha/con, 
anh/em trong một tài liệu HTML. Cháng hạn, thuộc tính ChildNodes trả về 


nhóm các nút con của một phần tử nhất dinh. Nhóm này tuong tự mảng, mặc dù 
nó không thuộc kiểu Array trong JavaScript. Ví dụ, một phần tử «div» với ID 
là myd1v có rất nhiều con là phần tử «a». Dòng lệnh sau truy xuất phần tử con 
đầu tiên của mydiv và đặt nó vào biến childOne: 


var childOne = document.getElementById("mydiv").childNodes[O 


Mỗi nút cha có một hoặc nhiều nút con, nhưng mỗi nút con chi có một nút cha 
được truy xuất bằng thuộc tính parentNode. Bạn có thể duyệt qua nhóm các 
nút con bằng cách sử dụng thuộc tính nextSibling và previousSibling. 
Nếu không còn phần tử anh em nào nữa, các thuộc tính sẽ trả về giá trị nu11. Ví 
dụ, thuộc tính previousSibling sẽ trả về giá trị nu.11 khi sử dụng trên nút con 
đầu tiên và thuộc tính nextSibling cũng sẽ trả về nu11 khi sử dụng trên nút 
con cuối cùng. 


Các thuộc tính f1rstCh11d và lastChild lần lượt chứa nút con đầu tiên 
(childNodes[0]) và cuối cùng của một phần tử. Khi một phần tử không chứa 
bất kỳ nút con nào, các thuộc tính đều trả về nu11. 


` A g m A ⁄ 
Làm việc với c uộc tính 
Các thuộc tính của phần tử đều có thể được truy xuất và gán giá trị thông qua 
JavaScript. Trong phần này, chúng ta sẽ tìm hiểu về cả hai thao tác trên. 


Xem thuộc tính 


Khi mới bắt đầu lập trình JavaScript, có thể bạn không biết một phần tử có 
những thuộc tính gì. Tuy nhiên, đừng lo lắng về điều này vì chúng ta có thể dùng 
một vòng lặp để gọi phương thức getAttribute() (lẫy các thuộc tính). Hàm 
sau đây sẽ hiển thị tất cả các thuộc tính của một phần tử cho trước: 


function showattribs(e) { 
var e - document.getElementById("braingialink"); 
var elemList - ""; //khai báo và khói tao danh sách : 
for (var element in e) { 
var attrib - e.getAttribute(element); 
elemList = elemList + element + ": " + attri 


alert(elemList); 


J 
Chỉ cần vài câu lệnh JavaScript với phương thức getE1ementByTd( ) là ban có 
thể gọi được hàm này như trong bài tập sau. 


Truy xuất các thuộc tính của một phần tử 


1. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác sửa 
file showattribs.htm trong thư mục mã nguồn mẫu của Chương 10. 


2. Trong trang này, thay thế chú thích TODO bằng đoạn mã in đậm sau. (Đoạn 
mã này cũng có trong file showattribs.txt của Tài nguyên đi kèm.) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Hiển thi c tính«/title» 
«script type-"t script"> 
function showat 
var e = document.getElementById("braingia- 
var elemList = ""; //khai báo và khói tao 
// các phần tử 
for (var element in e) { 
var attrib - e.getAttribute(elemer 
elemList = elemList + element + ": 
alert(elemList);** 
} 
</script> 
</head> 
<body> 


<a onclick="return showattribs();" href="http://www.brainç 
id="braingialink">Web Site của Steve Suehring</a> 

«script type-"text/javascript'» 

</script> 

</body> 

</html> 


3. Lưu file và dùng trinh duyệt mở lại. Ban sé thấy một trang nhu sau: 


K E e Mp/fbalhud/aar A * 2 X | B Hnhidchuậhh X 3/7 


f 


Web Site của Steve Suehring 


V 


4. Nhãn vào liên kết. Hàm JavaScript sẽ được thực thi. Hàm này truy xuất tới 
các thuộc tính của phần tử a, duyệt qua và gắn chúng vào một biến. Cuối 
cùng, biến này được hiến thị trong hộp thoại alert () như trong hình dưới 
đầy: 


nextSibling: null 
oanresizeend: null 
onrowenter: null 
aria-haspopup: null 
childModes: null 
ondragleave: null 
canHaveHTNML: null 
onbefarepaste: null 
ondragover: null 
onbeforecopy: null 
aria-disabled: null 
onpage: null 
recordNumber: null 
previousSibling: null 
nadeMame: null 
onbeforeactivate: null 
accesskey: null 
currentStyle: null 
scrollLeft: null 
onbefareeditfacus: null 
oncontrolselect: null 
aria-hidden: null 


anhlur: null 

hideFacus: 
clientHeight: null 

style: null 
onbeforedeactivate: null 


dir: null 
aria-expanded: null 
onkeydown: null 
nodeType: null 
ondragstart: null 
onscroll: null 
onpropertychange: null 
ondragenter: null 

id: braingialink 
aria-level: null 
onrowsinserted: null 
scopeName: null 
lang: null 
onmouseup: null 
aria-busy: null 
oncontextmenu: null 
language: null 
scrollTop: null 

offset Width: null 
onbeforeupdate: null 
onreadystatechange: null 


Thiết lập các thuộc tính 

Ban đã hoc cách sử dung hàm getAttribute( ) để lấy giá trị trong một thuộc 
tính. Sau đây, bạn sẽ học cách sử dung phương thức setAttribute() để thiết 
lập giá trị cho thuộc tính. 


Phương thức setAttribute() nhận vào hai tham số: thuộc tính mà bạn muốn 
thay đổi và giá trị mà bạn muốn thiết lập cho thuộc tính đó. Sau đây là ví dụ về 
việc thay đối giá trị thuộc tính href, bạn cũng có thể tìm thấy ví dụ này trong 
file setattrib.htm của Tài nguyên đi kèm. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 
<title>Thiết lập các thuộc tính</title> 

</head> 

<body> 

«a hrefz'http://www.braing 

«script type-"text/javascr 
var a1 - document.ge entById("braingialink"); 
alert(ai.getAttribute("href")); 
ai.setAttribute("href","http://www.microsoft.com"); 
alert(ai.getAttribute("href")); 

</script> 

</body> 

</html> 


id-"braingialink"»Web Site 


Khi mở trang web này trong một trình duyệt, ban sẽ thấy hộp thoai thông báo giá 
trị hiện tại của thuộc tính href như trong Hình 10-5. 


Í Message from webpage EES 
Message from webpage mm... 


A http://www.braingia.org 


— -—— 


Hinh 10-5 Giá tri ban dàu cüa thuóc tín 


Khi hộp thoại đóng lai, phương thú 1bute() sẽ được thuc thi và 
thuộc tính href sẽ thay đối nhu trong Hinh 10-6. 


Message from webpage Ii 


A http://www.microsoft.com 


Hinh 10-6 Giá tri mới của thuộc tính "hr 


Phuong thüc setAttribute()k 0 trợ một cách thống nhất trong 
các phiên bản IE trước phiên bản 8, ó một cách chắc chắn hơn để thiết 
lập thuộc tính là dùng dấu chấm để truy cập vào thuộc tính của phần tử. 


Ví dụ, thiết lập thuộc tính href: 
a1.href = '"http://www.braingia.org"; 


Tuy nhiên, nếu ứng dụng không hỗ trợ các phiên bản cũ của IE thì bạn nên dùng 
các phương thức setAttribute() và getAttribute(). Ngoài ra, ban có thể 
dùng phương thức removeAttribute() để xóa hoàn toàn thuộc tính của phần 
tử. Tất nhiên, bạn vẫn cần chú ý đến việc hỗ trợ trên các phiên bản IE cũ. 


Tạo các phần tử 


Bên cạnh các phần tử tồn tại sẵn trên trang web, bạn có thể tạo thêm các phần tử 
mới bằng DOM. Phần này sẽ hướng dẫn một số cách tạo mới các phần tử. 


Thêm vän bán 

Phương thức createElement() của đối tượng document cho phép tạo hoặc 
thêm phần tử vào một tài liệu. Ví dụ: 

var newelement = document.createElement("p"); 


Biến newelement giờ dày tham chiếu đến phần tử mới được tao ra. Dé hiển thi 
phần tử này, bạn cần chèn nó vào tài liệu — thường việc này sẽ thực hiện sau khi 
thêm văn bản vào nó. Phần tử mới được chèn vào tài liệu bằng phương thức 
appendChild() như sau: 


document. body. appendCh11d(newelement) ; 


Nhưng phần tử p không có nội dung thi có ích gi? Bạn có thể dùng 
appendChild() kết hợp với phương thức createTextNode( ) nhu sau: 


newelement.appendChild(document.createTextNode("Xin chào")); 


Ba dòng mã trên có thể được dùng tai bá 
tài liệu được khai báo. Dưới đây là 
web. Đoạn mã này có thể được tì 
kèm. 


ứ đầu ngay sau khi phần «body? của 
đoạn mã trong ngữ cảnh một trang 
file create.htm của Tài nguyên di 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 
<title>Tạo phần tử</title> 

</head> 

<body> 
<script type="text/javascript"> 
var newelement = document.createElement("p"); 
document .body.appendChild(newelement); 
newelement.appendChild(document.createTextNode("Hell: 
</script> 

</body> 

</html> 


Khi dùng trinh duyệt để mở, ta được kết quả nhu trong Hình 10-7. 


olai 
2 B http/Iocalost/ear D » > X 


Eiu phin t ADR 


Hello World 


k i 
Hình 10-7 Sử dung phuong thức `createElement`, `createTextNode` và `appendChild()` để tạo 
phần tử mới. 


Thêm phần tử và thiết lập ID 

Ví dụ trước nói về cách thêm một phần tử vào tài liệu. Thông thường, bạn sẽ 
muốn thiết lập thuộc tính cho phần tử mới. Ví dụ tiếp theo mở rộng ví dụ trước 
bằng cách thêm thuộc tính 1d (bạn có thể tìm thấy ví dụ này trong file 
createid.htm của Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 


<title>Tạo phần tử</title> 

</head> 

<body> 
«script type-"text/javascript'» 
var newelement - document.createElement("p"); 
newelement.setAttribute("id","newelement"); 
document.body.appendChild(newelement); 
newelement.appendChild(document.createTextNode("Hell: 
</script> 

</body> 

</html> 


Xóa các phán tur 


Bạn có thé xóa các phần tử trong tài liệu bằng phương thức removeCh11d( ). 
Hãy nhớ lại đoạn mã để thêm phần tử mới ở phần trước. Chúng ta sẽ mở rộng 
bằng cách thêm vài phần tử p nữa: 


«!DOCTYPE HTML PUBLIC "-// 
"http://www.w3.org/TR/htm 
«html» 


HTML 4.01//EN" 
.dtd”> 


<head> 
<title>Tạo phần tử</title> 
</head> 
<body> 
«script type-"text/javascript'» 
for (var i = 0; i < 3; i++) { 
var element - document.createElement("p"); 
element.setAttribute("id","element" + i); 
document.body.appendChild(element); 
element.appendChild(document.createTextNode( 
"Xin chào, tôi là phần tử " + i)); 
} 
</script> 
</body> 
</html> 


Khi dùng trình duyệt mở trang, ta có một trang web như trong Hinh 10-8. 


K 


Bạn có thể thêm một số dòng lệnh để xóa phần tử vira tạo: Lưu y phương thức 
removeChild() có thể xóa bất cứ phần tử nào trong tài liệu chứ không chỉ 
những phần tử vừa tạo. 


var removeel = document.getElementById("elementi"); 
document.body.removeChild(removeel); 


Trong ví du này, chúng ta thêm hai dòng lệnh bên trên vào ngay sau đoạn mã tạo 
phần tử. Trên thực tế, bạn có thể đặt lời gọi hàm removeCh1 1d( ) bất cứ đâu 
miễn là sau khi phần tử được tạo. Đoạn mã cuối cùng với các dòng lệnh mới 
được in đậm có dạng như sau. (Bạn có thể tìm thấy đoạn mã này trong file 
removeel.htm của Tài nguyên đi kèm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<title>Tạo phần tử</title> 
</head> 
<body> 
<script type="text ipt"> 
for (var i = 0; 1 
var elemen ument.createElement("p"); 
element. setAt bute("id", "element" + i); 
document .body.appendChild(element); 
element.appendChild(document.createTextNode( 
"Xin chào, tôi là phần tử " + i)); 
J 
var removeel = document.getElementById("elementi"); 
document .body.removeChild(removeel); 
</script> 
</body> 
</html> 


Hinh 10-9 minh hoa kêt quá. Vòng láp for vån tao ra ba phân ti? mói, nhung 
đoạn má in đậm đã xóa phần tử ở giữa ngay sau khi nó vừa được tạo. 


G - | gm ÍIlnrah hos/ear Ô v 3X Toph hàntự à x i 


Yin chào, tit là phin t 0 


Xin chào, ti là plinti 2 


Y 

Hình 10-9 Sử dung `removeChild()` để xóa một phần tử khói một tài liệu. 
Bài tập 
1. Tạo một tài liệu chứa một đoạn văn bản được tạo mới và thêm vào bằng cách 


sử dung DOM. Tạo một liên kết ngay phía sau đoạn văn bán này và liên kết 
đến website mà bạn chọn. Hãy thiết lập thuộc tính 7d cho tất cả các phần tử. 


2. Tạo tài liệu html với bất kỳ phần tử nào mà bạn muốn, hoặc sử dung tài liệu 


HTML có sẵn chứa các phần tử có thuộc tính id. Truy xuất hai trong số các 
phần tử đó, thay đổi và đưa chúng trở lai tài liệu. Những thay đổi mà bạn có 
thể tạo ra tùy thuộc vào kiểu phần tử mà bạn chọn. Ví dụ, nếu chọn phần tử 
a, bạn có thể thay đổi href; nếu chọn phần tử p, bạn có thể thay đổi văn 
bản. 


. Dùng DOM, tạo một tài liệu chứa bảng với ít nhất hai cột và hai dòng. Thêm 
văn bản vào các ô trong bảng. 


Chuong 11 

Các su kién trong JavaScript và 
làm việc với trinh duyệt 

Sau khi đọc xong chương này, bạn có thể: 


a Hiểu mô hình sự kiện trước đây. 

» Hiểu mô hình sự kiện JavaScript W3C. 

= Thêm hàm xử lý sự kiện trên trang web bằng JavaScript. 
= Mở cửa số mới bằng JavaScript. 

= Mở tab mới trên một trình duyệt w 
» Tạo bộ định thời bằng JavaScri 


= A? z A - 
Hiéu các su kién Window 
Trong các chương trước, ban đã được học cách dùng hàm xử ly sự kiện để hồi 
đáp hoạt động của người dùng hay các sự kiện trên tài liệu. Hãy nhớ lại, các sự 
kiện của đối tượng Window bao gồm mouseover ( ), mouseout(), 1oad( ) và 
click(). Các sự kiện này được hỗ trợ khá tốt trên hầu hết các trình duyệt, 
nhưng nhiều sự kiện khác thì không. Phần này sẽ trình bày về sự kiện và cách sử 
dụng sự kiện trong lập trình JavaScript. 


Các mô hình sự kiện 

Thách thức đầu tiên khi tìm hiểu các sự kiện là hiểu về hai mô hình sự kiện khác 
nhau sau đây: mô hình được sử dụng trong các phiên bản trình duyệt Windows 
Internet Explorer trước phiên bản 9 và mô hình được tổ chức World Wide Web 
Consortium (W3C) định nghĩa. Mô hinh cũ hơn - DOM cấp độ 0 — bao gồm các 
sự kiện đã được giới thiệu trong các chương trước (Chương 1 “Hiểu hơn về 


JavaScript" đã giới thiệu sơ qua về DOM cấp 0). Mô hinh sự kiện DOM cấp 0 
tương thích với hầu hết các trình duyệt hỗ trợ JavaScript. Trong phần này, tôi sẽ 
giới thiệu ngắn gọn về DOM cấp 0 và sau đó giải thích sự khác biệt giữa hai mô 
hinh sự kiện: mô hinh W3C và mô hình Internet Explorer. 


Sử dụng mô hình DOM cấp 0 


Mô hình DOM cấp 0 là mô hình dễ sử dụng nhất (như bạn đã thấy từ các chương 
trước) và là mô hình thích hợp nhất cho việc xử lý sự kiện trong JavaScript. 
(Như đã đề cập, DOM cấp 0 được hỗ trợ trong tất cả các trình duyệt web phổ 
biến). Vậy tại sao chúng ta không sử dụng mô hình sự kiện DOM cấp 0 ở mọi 
nơi? Lý do thật đơn giản: Nó thiếu sự linh hoạt cần thiết để xử lý những sự kiện 
phức tạp. Ví dụ, DOM cấp 0 không thể xử lý nhiều sự kiện trên cùng một phần 
tử. Tuy nhiên, cũng không có gi sai khi dùng DOM cấp 0 cho các đoạn mã đơn 
giản như trong suốt cuốn sách này. 


Mô hình sự kiện DOM cấp 0 gồm một số sự kiện mà các thẻ HTML tạo ra khi 
phản hồi lại những hành động hay sự thay đổi trạng thái của người dùng. Bảng 
11-1 mô tả các sự kiện này. 


BẢNG 11-1 Các sự kiện DOM cá 


Tên sự kiện Mô tả 

onblur() Phần tử bj mát focus (không còn được chon bởi người dùng). 

onchan ge ( ) Ll tử đã thay đổi (ví dụ, một người dùng gõ vào một 6 nhập liệu) hoặc mất 
onclick() Nhấn chuột vào một phần tử. 

ondbclick() Nhán düp chuót vào mót phàn tu. 

onfocus( ) Phần tử nhận được focus (phần tử được chon). 


Một phím được nhãn (trái ngược với được nhả ra) trong khi phần tử đang được 
chọn. 


onkeypress( ) Một phím được nhãn khi phần tử dang được chon. 


onkeydown .( ) 


onkeyup( ) Một phím được nhá ra khi phần tử dang được chon. 

onl oad ( ) Phần tử được tải lên trang web (văn bản, frameset hoặc hình ảnh). 
onmousedown() Chuột được nhấn. 

onmousemove( ) Chuột di chuyển. 

onmouseout ( ) Chuột di chuyển ra ngoài một phần tử. 

onmouseover( ) Chuột di chuyển trên một phần tử. 


onmouseup() Khi nút bấm trên chuột máy tính được thả ra. 


onres1ze() Kích thước cửa sổ bị thay đổi. 
onselect() Nội dung của một phần tử trên form được chọn. 
onsubmit( ) Form được gửi di. 

onunload() Văn bản hoặc frameset được gỡ bó. 


Các mô hình sự kiện mới: W3C và Internet Explorer 

W3C phát triển một mô hình sự kiện cung cấp các hàm xử lý sự kiện hiệu quả, 
được hỗ trợ trong hầu hết các trình duyệt lớn trừ các phiên bản IE trước phiên 
bản 9. Vi m6 hinh sự kiện W3C và mô hình sự kiện Internet Explorer khác nhau 
nên khi lập trình JavaScript bạn cần chú ý đến cả hai mô hình này. 


Về lý thuyết, quá trình xử lý sự kiện trong hai mô hinh này tương tu nhau. Trước 
tiên, bạn đăng ký một sự kiện, sau đó liên kết sự kiện này với một hàm xử lý sự 
kiện. Khi sự kiện đăng ký diễn ra, hàm xử lý sự kiện sẽ được gọi. Tuy nhiên, vị 
trí xảy ra sự kiện lại là điểm khác biệ ong giữa hai mô hinh. 


Để hiểu sự khác biệt này, hãy hình mg ra 1 
phân tử <img> nằm trong phần ti? < .. Nếu người dùng di chuột lên 
trên hình ảnh, sự kiện onmouseover ( }Sẽ được xử lý trước trong thé «body» 
hay thé «img»? Hai mô hình bất đồng trong việc xác định vi trí trước tiên nên xử 
lý sự kiện này. 

W3C hỗ trợ hai hình thức xác định vị trí nên xử lý sự kiện: Event Capture và 
Event Bubbling .ÐÕi với Event Capture, DOM tìm kiếm hàm xử lý bắt đầu 
từ cấp cao nhất (cấp tài liệu) và tiếp tục xuống các phần tử con trên cây DOM. 
Nếu bạn sử dụng Event Capture, phần tử <body> sẽ xử lý sự kiện trước, sau đó 
tới «img». Event Bubbling thì ngược lại, phần tử chứa sự kiện sẽ xử lý trước 
tiên, sau đó mới đến cấp cha của nó. 


t tài liệu có phần tử <body> và 


Mô hình W3C - cũng như tất cá các trình duyệt theo chuẩn W3C - có thể sử 
dụng cả hai hình thức xử lý sự kiện trên, trong khi các phiên bản Internet 
Explorer trước phiên bản 9 chỉ sử dụng Event Bubbling. Với mô hinh W3C, bạn 
đăng ký một sự kiện bằng phuong thức addEventListener(). Với mô hinh 
Internet Explorer cũ, bạn dùng attachEvent( ) cho mục đích tương tự. Trên 
thực tế, điều này có nghĩa là bạn cần sử dụng cả hai phương thức trong mỗi đoạn 
mã để xử lý các sự kiện và lựa chọn phương thức phù hợp với trình duyệt sẽ diễn 


ra tại thời điểm đoạn mã được thuc thi. Cấu trúc cơ bản của phuong thức 
addEventListener /( ) là: 


addEventListener(su kién,hàm,capture/bubble); 


Trong đó, tham số capture/bubble là một giá tri Boolean, true tương đương 
với Event Capture và false tương đương với Event Bubbling. Đây là ví dụ điển 
hình về lời goi phương thức addEventListener() cho button Submit. Lời gọi 
đăng ký sự kiện submit (gửi form), chi định một hàm có tên myFunction( ) 
(hàm này được định nghĩa ở một vị trí khác trong chương trình) và sử dụng cách 
bắt sự kiện Event Capture. 


window.addEventListener("submit",myFunction(),true); 
Để dáng ký sự kiện tương tự bằng Event Bubbling, viết nhu sau: 
window.addEventListener("submit",myFunction(),false); 


Mô hinh Internet Explorer trước đây không yêu cầu tham số thứ ba khi gọi 
attachEvent( ) vi nó chỉ hỗ trợ Eve bbling. 


Sau đây là ví du đăng ký sự kiện st 
và liên kết nó với phương thức myFt 


các phiên bản Internet Explorer cũ 
) bằng cách gọi attachEvent ( ): 


window.attachEvent("onsubmit",myFunction()); 


Bạn có thể nhận ra một khác biệt nhỏ trong tên của sự kiện cần xử ly - submit 
và onsubmit (trong DOM cấp 0). Nhiều sự kiện trong DOM cấp 2 đã được đổi 
tên. Bảng 11-2 trình bày tên của một vài sự kiện DOM cấp 0 và sự kiện tương 
ứng trong DOM cấp 2. Chú ý rằng các sự kiện trong DOM cấp 2 đơn giản loại 
bỏ từ “on” ra khỏi tên sự kiện của mô hình cũ. (Mô hình Internet Explorer cũ sử 
dụng tên sự kiện trong DOM cấp 0). 


BẢNG 11-2 Các sự kiện trong DOM cấp 0 và DOM cấp 2. 


Sự kiện DOM cấp 0 Sự kiện DOM cấp 2 


onblur() blur 
onfocus( ) focus 
onchange( ) change 


onmouseover() mouseover 


onmouseout() mouseout 
onmousemove() mousemove 
onmousedown() mousedown 
onmouseup() mouseup 
onclick() click 
ondbclick() dbclick 
onkeydown .( ) keydown 
onkeyup() keyup 
onkeypress() keypress 
onsubmit() submit 
onload() load 
onunload() unload 


Cả mô hình W3C và Internet Explorer cũ đều có các phuong thức để gỡ bó bộ 
lắng nghe sự kiện. Trong W3C, phương thức này là removeEventL1stener ( ) 


và nhận vào ba tham số giống như ag 
removeEventL1stener (sự kiệ 


Trong các phiên bản cũ của Internet 


detachEvent(): 


qL1stener(): 


oture/bubble) 


er, phương thức được sử dung là 


detachEvent(sự kiện, hàm) ; 


Nếu bạn không muốn việc xử lý sự kiện tiếp tục diễn ra ở cấp cao hơn hoặc thấp 
hon sau khi hàm xử lý sự kiện đầu tiên được thực thi, W3C hỗ trợ phương thức 
stopPropagat1on( ) còn Internet Explorer cũ dùng thuộc tính 
cancelBubble. Trong phần sau của chương “Mở, đóng và thay đổi kích thước 


cửa sổ” sẽ có một ví dụ về việc này. 


Hàm xử lý sự kiện chung 

Việc thêm nhiều bộ lắng nghe cho những sự kiện cần xử lý nhanh làm chương 
trình trở nên cồng kềnh. Trên thực tế, bạn chỉ cần sử dụng một hàm xử lý sự kiện 
chung (generic event handler) cho tất cả các trình duyệt nhằm giảm bớt sự không 
tương thích giữa các mô hinh. Ví dụ 11-1 giới thiệu một hàm xử lý sự kiện 
chung. Bạn có thể tìm thấy đoạn mã này trong file ehandler.js trong thư mục mã 


nguồn mẫu của Chương 11. 


VÍ DỤ 11-1 Hàm xử lý sự kiện chung. 


var EHandler = {}; 
1f (document.addEventListener) { 
EHandler.add = function(element, eType, eF 
1f (eType == "load") { 
if (typeof window.onload = 
var existingOnload 
//onload s 
window.onload - fu 
existingOn 
eFunc( ); 
) // két thüc hàm 
) else { 
window.onload - eF 


} 
} else { 
element .addEventListener (e 
} 
}; 


EHandler.remove = function(element, eType, 
element.removeEventListener(eType, 
}; 


else if (document.attachEvent) { 
EHandler.add = function(element, eType, eFunc) { 
if (eType == "load") { 
if (typeof window.onload -- "funct 
var existingOnload - windo 
window.onload - function() 
existingOnload(); 


eFunc( ); 
} // kết thúc hàm xử lý on 
} else { 
window.onload - eF 
} 
} else { 


element.attachEvent("on" + eType, 
} 
); 


EHandler.remove = function(element, eType, eFunc) 
element.detachEvent("on" + eType, eFunc); 


}; 
} 


Hàm xử lý sự kiện chung tạo một đối tượng EHand1er (viết tắt của event 
handler), sau đó thêm vào hai phương thức add( ) và remove( ), cả hai đều có 
thể dùng được trong mô hinh W3C và Internet Explorer cũ. Trong mỗi mô hinh, 
phương thức add xác dinh xem đó có phải là sự kiện 1oad không, có nghĩa là 
hàm có cần được thực thi khi trang được tải lên không. Nếu đúng, add cần xác 
định xem liệu đã có bất kỳ hàm onload nào được định nghĩa chua. Nếu có, hàm 
onload có sẵn phải được dua vào thực thi cùng với hàm mới được định nghĩa. 


Để đi tiếp chương này cũng như phần còn lại của quyển sách, tôi đề nghị bạn lưu 
đoạn mã trên vào một file JavaScript ngoài có tên là ehandler.js và thêm file này 
vào bất kỳ file JavaScript nào cần xử lý sự kiện. Xin nhắc lại cách thêm file 
JavaScript ngoài như sau: 


«script type=”text/Javascr1pt<edata- src=”"ehandler. Js”></scr 1| 


Một điều may mắn là, Windows In 
tương thích với mô hình W3C. Do n bản này trở nên phổ biến hơn 
trên thị trường, at tachEvent sé dà ay thế. Tuy nhiên, những trang 

web hỗ trợ các trình duyệt cũ sẽ vẫn cần sử dụng mô hình cũ của Microsoft trong 
nhiều năm tới. 


rer phiên bản 9 sử dụng mồ hình 


Bạn có thể cải thiện đoạn mã xử lý sự kiện trên cho phù hợp với tình huống thực 
tế khi xây dựng các ứng dụng JavaScript mạnh hơn. (Tham khảo thêm thông tin 
về chủ đề này tại trang web của John Resig: http://ejohn.org/blog/flexible- 
javascript- events/). Tuy nhiên, giải pháp tốt nhất là sử dụng một framework 
hoặc thư viện JavaScript như jQuery để trừu tượng hóa mô hình sự kiện. 


Thông tin bổ sung Tôi sé trinh bày chi tiết hơn về jQuery và các framework 
của JavaScript trong Chương 19 "Sơ lược vé AJAX". Trước mắt, đoạn mã 


xử lý sự kiện đơn giản đã trình bày ở trên cũng đủ cho các ví dụ trong sách 
này. Để tìm hiểu thêm về lập trình JavaScript xử lý sự kiện nâng cao, tôi 
khuyên bạn nên dùng một thư viện như jQuery thay vì cách xử lý đơn giản 
như đưa ra ở đầy. 


Phần còn lại của chương này áp dung những kiến thức ban đã thu được về sự 
kiện cũng như về Mô hình đối tượng trình duyệt trong Chương 9; Mô hình đối 
tượng tài liệu (DOM) trong Chương 10 và cú pháp ở phần I của cuốn sách 
“JavaScript là gì, dùng ở đâu, tại sao dùng và sử dụng như thế nào?”. 


Nhận biết thông tin khách truy 
cập 


Lập trình với JavaScript thường đòi hỏi phải nhận biết trình duyệt mà khách truy 
cập sử dụng để truy cập trang web. Trong nhiều năm, việc này được thực hiện 
chủ yếu bằng cách sử dụng thuộc tính userAgent mang thông tin về trình duyệt 
của khách truy cập trong đối tượng navigator. Tuy nhiên, cách làm này hiện 
nay không còn được khuyến khích bởi vì khách truy cập có thể dễ dàng giả mạo 
thông tin. Ngoài ra, việc duy trì chính xác thông tin userAgent cho tất cả các 
phiên bản của các trình duyệt cũng cóaiiều khó khăn. 


Bản thân tôi dùng năm phiên bản ti h duyệ hác nhau. Vì vậy, việc cập nhật 
danh sách xác định trình duyệt nào năng nào rất vất vả. Hãy tưởng 
tượng mọi chuyện sé thế nào khi bạn luôn đảm báo ứng dụng JavaScript của 
mình sẽ tương thích với moi trình duyệt và moi phiên bản của trình duyệt đó. 
Điều này gần như không thể. Đấy là còn chưa kể đến việc các chuỗi userAgent 
có thể bi giả mạo (bởi những đoạn mã độc hại hoặc cho các mục đích khác!). 


Vì vậy, sau đây tôi sẽ chỉ trinh bày ngắn gọn về thuộc tính userAgent và sau đó 
chuyển sang trình bày những phương thức mới (tốt hơn nhiều) để xác định liệu 
đoạn mã JavaScript mà bạn đang sử dụng có hoạt động tốt trên trình duyệt của 
khách truy cập hay không. Phần này cũng xem xét các thuộc tính hữu dụng khác 
của đối tượng navigator. 


Tóm lược thuộc tính userAgent 


Như đã nói, chuỗi userAgent là một thuộc tính của đối tượng navigator. Nó 
chứa thông tin vé trình duyệt của người dùng. Để xem thông tin userAgent, chi 
cần nhập dòng sau vào trình duyệt của bạn: 


javascript:alert(navigator.userAgent); 


Nếu dang sử dung Windows Internet Explorer 7, ban có thể thấy một hộp thoai 
nhu Hinh 11-1. 


Message from webpage j 


Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; 
MET CLR 2.0.50727; NET CLR 3.5.30728; NET CLR 3.0.30729: Media 
Center PC 6,0; InfaPath.2; .hlET4.0C; .,MET4.0E} 


HINH 11-1 Thuộc tính `userAgent` của đối tượng "navigator 


Các trình duyệt khác sẽ hiến thị thông tin theo cách khác. Ví dụ, trình duyệt 
Firefox sé hiển thị như sau: 


Mozilla/5.0 (Windows; U; Wi NT 6.1; en-US; rv:1.9.2.3) ! 


Chuỗi trên thay đổi theo từng phiér duyệt. Nếu cố công theo dõi từng 
phiên bản mới của tất cả các trinh du đó lại tìm hiểu xem phiên bản nào 
hỗ hợ tính năng nào của JavaScript, bạn Sẽ phí phạm thời gian của chính mình, 
của công ty và của cả khách hàng. 

Cách tốt hơn cả để biết tính năng nào được hỗ trợ trên trình duyệt là kiểm tra 
tính năng, nội dung này sẽ được thảo luận ngay trong phần tiếp theo. 


Kiểm tra tính năng 


Kiểm tra tính năng (feature testing) hay nhận biết đối tượng (object detection) là 
kỹ thuật được sử dụng trong JavaScript nhằm xác định trình duyệt của người 
dùng có hỗ trợ một tính năng nhất định hay không. 


Thật may là bạn không cần kiểm tra tất cả các hàm và các phương thức cần 
dùng. Mô hình DOM cấp 0 và các hàm JavaScript cũ được hỗ trợ rộng rãi và 
được triển khai gần như tương tự nhau trên các trình duyệt nên việc kiểm thử 
cho từng tính năng cụ thể là không cần thiết. 


Tuy nhiên, bạn vẫn phải kiểm tra xem trình duyệt có hỗ trợ JavaScript hay không 


bởi vì không phải tất cả các trinh duyệt đều hỗ trợ JavaScript và không phải tất 
cả người dùng đều bật tính năng JavaScript trên trình duyệt của họ. 


Toán tử typeof là cơ chế chủ yếu được dùng để kiểm tra tính năng. Toán tử này 
được sử dụng như sau: 


if (typeof tenTinhNang !- "undefined") ( 
// Làm gi dó thü vi vói tính náng này 
} 


Dé kiểm tra phương thức getElementById() có được hỗ trợ không, hay nói 
cách khác trình duyệt có hỗ trợ DOM cấp độ cao hay không, bạn dùng đoạn mã 
sau: 


if (typeof document.getElementById !- "undefined") { 
alert("có hỗ trợ getelementbyid"); 

} else { 
alert( "Không hỗ trợ getelementbyid"); 

} 


Cüng có thé ban không muón dùn 


à làm như sau: 


} 


Tuy nhiên, cách này không hoàn toàn đáng tin cậy như việc kiểm tra bằng 
typeof. Khi bạn không dùng typeof, phương thức hay thuộc tính được kiểm 
tra có thể trả về © hoặc false theo mặc định, làm cho điều kiện kiểm tra thất 
bại; nói cách khác, kết quả trả về là trình duyệt không hỗ trợ phương thức hay 
thuộc tính này trong khi thực tế là ngược lại. Vì vậy, sử dụng typeof là cách 
kiểm tra an toàn và đáng tin cậy hơn cả. 


if (document. getElementByT 


Một cách khác là dùng toán tử điều kiện ba ngô1 để thiết lập cờ ở đầu đoạn 
mã. Sau đó sử dung câu lệnh điều kiện if thông thường để kiểm tra cờ này: 


//Kiém tra getElementById, gán kết quả vào bién getElem 
var getElem - (typeof document.getElementById -- "function") 
//bây giờ ban có thé kiểm tra getElem 
If (getElem) { 
//Chüng ta biết getElementByid được hỗ trợ 
⁄/vì vậy chúng ta sẽ dùng nó 


Khóng düng các trinh duyét cü dé chay 
JavaScript 


Một trong những vấn đề làm các lập trình viên web dau đầu là ho phải làm việc 
với các trình duyệt cũ. Việc viết một trang web kiểu mới cho các trình duyệt mới 
nhưng vẫn hoạt động tốt trên các trình duyệt cũ càng lúc càng trở nên khó khăn 
hơn. Thế nào là một trình duyệt cũ? Nếu hỏi ba chuyên gia thiết kế web, có thể 
bạn sẽ nhận được ba câu trả lời khác nhau. Với cá nhân tôi, trình duyệt cũ là 
trình duyệt từ ba năm tuổi, thậm chí là hai năm tuổi trở lên. 


Theo định nghĩa này, Firefox 1.0 sẽ là trình duyệt cũ mặc dù hầu hết các trang 
web đều hiển thị tốt trên trình duyệt này và tất cả mã JavaScript cũng chạy tốt 
trên Firefox 1.0. Một tiêu chí tổng quát hơn được nhiều nhà thiết kế web dùng để 
định nghĩa trình duyệt cũ là các phiên bản trước phiên bản 5 của trình duyệt 
Internet Explorer hoặc Netscape. 


Với thực tế là các phiên bản cũ hơn phiên bản Microsoft Internet Explorer 5.0 
vẫn được nhiều người sử dụng, có tố à nên chấp nhận việc mã 
JavaScript sẽ không chạy trên các t đó. Gần đây, tôi cài đặt bản 
Netscape 3 (ra đời năm 1997). Trì øặp rất nhiều vấn đề với các đoạn 
mã JavaScript cũng như với việc hiển L và CSS trên các trang web cơ 
bản. Điều này cũng dễ hiểu vi Netscape3 ra đời trước khi các tiêu chuẩn hiện nay 
được giới thiệu. Một vấn đề nữa là dù bạn cố gắng thế nào đi nữa, trang web của 
bạn có thể sẽ không chạy trên các phiên bản cũ của trình duyệt. Tôi khuyên bạn 
nên chọn cấp trình duyệt thấp nhất để hỗ trợ thiết kế theo mục tiêu đó và luôn 
ghi nhớ rằng cấp trình duyệt càng cao thì số lượng khách thăm trang càng hạn 
chế. Mục đích là cân bằng giữa hai tiêu chí của một trang web: thân thiện và độc 
đáo. 


Có hai kỹ thuật chính để tránh không dùng JavaScript trên các trình duyệt cũ: 
chèn ghi chú HTML bên trong JavaScript, sử dung thẻ <noscript> 
«/noscript». 


Dé dua chú thích HTML vào đoạn mã JavaScript, ta bao chúng trong cáp «!- - 
và - -> nhu ví du sau: 


«script type-"text/javascript'» 
<!-- //Bát đầu chú thích 
var helloelem = document.getElementById("hello"); 


alert(helloelem.innerHTML); 
// Két thüc chü thích --» 
</script> 


Không phái moi trinh duyệt đều chấp nhận các chú thích HTML, vi vậy đôi khi 
bạn vẫn gặp một số lỗi. Dinh dạng chú thích này ngày càng trở nên ít phó biến 
hơn. Cho đến khi các trình duyệt cũ bị loại bỏ hoàn toàn thì cách làm này không 
còn cần thiết nữa. 


Nội dung trong cặp thé <noscript> «/noscript» sé hiển thi khi trình duyệt 
bi phát hiện không hỗ trợ JavaScript. Sau đây là một ví dụ về <noscript>: 


<noscript> 
<p> Trang này yêu câu JavaScript> </p> 
</noscript> 


Khi dùng trình duyệt không hỗ trợ JavaScript, người dùng sẽ thấy nội dung nằm 
giữa cặp thẻ «noscript» «/noscript». Trong ví dụ này, họ sẽ thấy dòng 
thông báo: “Trang này yêu cầu JavaScript”. Lưu ý rằng đoạn mã «nosript» 
không làm gián đoạn việc thực thi tích cú pháp, do đó đoạn mã 
HTML còn lại trong trang vẫn hié h thường. 


Tôi khuyên bạn chỉ sử dụng «nosc ø các ứng dụng bắt buộc cần 
JavaScript chứ không phải trong những ứng dụng chỉ dùng JavaScript cho các 
hiệu ứng bề ngoài như ảnh cuộn. Việc lạm dụng JavaScript hoặc sử dụng không 
đúng cách sẽ gây trở ngại cho người sử dụng. Không có gi tệ hơn việc để người 
dùng truy cập vào trang web chỉ để thấy nó không hoạt động, không phản hồi 
hoặc bị khóa vì một vài đoạn mã JavaScript không cần thiết. 


Mách nhỏ Bạn cần nhớ rằng có nhiều lý do khiến người dùng không thể sử 


dụng JavaScript, có thể họ phải sử dụng trình duyệt trợ giúp đặc biệt hoặc 
đơn giản là chương trình đọc văn bản. Vì vậy, hãy cố gắng tạo đầy đủ các 
chức năng văn bản cho trang web và cung cấp một sơ đồ trang tiện dụng. 


Các phương thức và thuộc tính khác của 
đối tượng navigator 


Mặc dù thuộc tính userAgent không được ưa dùng song đối tượng navigator 
thực sự cung cấp nhiều thông tin hữu ích mà người lập trình JavaScript có thể 
truy xuất. Chương 9 trình bày chỉ tiết về đối tượng này, bao gồm tất cả các thuộc 
tính của nó cũng như cách xác định liệu Java đã được bật trong trình duyệt hay 
chưa. 


Chú ý Hãy thận trọng khi sử dụng đối tượng navigator. Đôi khi các kết 
quả có thể không hoàn toàn chính xác. Không những thế, navigator sẽ 


không khả dụng trên những trình duyệt không hỗ trợ JavaScript. Vì vậy, 
đừng để chức năng chính của trang web phụ thuộc vào thuộc tính của đối 
tượng navigator! 


Mở, đóng và thay đổi kích thước 
cửa số 


Một trong những tính năng ít được hất của JavaScript là khả năng mở, 
đóng và thay đổi kích thước cửa sổ tr êt. Việc mở thêm một cửa sổ trên 
trình duyệt để đáp lại hoặc đóng vai trò như một phần của sự kiện onload là 
thao tác thường xuyên và phiền nhiễu của các nhà quảng cáo. Thiết lập mặc định 
trong Mozilla Firefox, Opera, và một số trình duyệt khác cho phép người dùng 
chán tính năng này. IE 6.0 trên Service Pack 2 và các phiên bản sau cũng cung 
cấp lựa chọn đó. 


Tôi chưa từng thấy một cửa sổ pop-up tự động nào thật sự hữu ích với người 
dùng mà không khiến họ cảm thấy khó chịu. Nếu bạn chắc chắn rằng trang web 
của mình cần một thành phần để mở một cửa só mới, tôi khuyên ban nên xem 
xét lại việc điều hướng trước khi làm việc đó. Người dùng sẽ cảm kích không chỉ 
vi trang web đã được đơn giản hóa và trực quan hơn mà còn vì nó ít phụ thuộc 
vào JavaScript và sẽ hoạt động tốt trên cả những trình duyệt mà ngôn ngữ này đã 
bị vô hiệu hóa. 


Mặc dù các cửa sổ gây phiền toái, nhưng đôi khi người dùng muốn mở cửa sõ 
mới khi họ nhấn chuột. Cháng hạn, nhãn vào liên kết để mở một cửa sõ nhỏ cho 
phép người dùng lựa chọn từ một menu hoặc hiển thị thông tin trợ giúp... 


Đối tượng window chứa một số phuong thức hữu ích cho việc mở, đóng và thay 
đối kích thước cửa số. Phương thức open dùng để mở cửa số trình duyệt mới. 
Cú pháp cơ bản của nó là: 


window.open(url, name, features) 


Tham số ur1 là chuỗi đại diện cho đường dẫn (URL) sé được tải. Nếu tham số 
này để trống, trình duyệt sẽ mở một trang trống mặc định. Tham số name đại 
diện cho tên cửa số được mở. Nếu đã có một cửa sổ cùng tên được mở sẵn, 
phương thức này sẽ mở URL trong cửa sổ đó; nếu không, cửa sõ mới sẽ được 
mở ra. 


Tham số features là một chuỗi chứa nhiều lựa chọn được phân tách với nhau 
bởi dấu pháy đại diện cho những đặc tính mà bạn muốn cửa sổ mới phái có 
chăng hạn như chiều dài, chiều rộng và thanh cuộn của cửa sổ. Bảng 11-3 liệt kê 
một số đặc tính có sẵn. Danh sách này không toàn diện vì các trình duyệt hỗ trợ 
những đặc tính khác nhau và chúng có tên khác nhau. Xem 
http://msdn2.microsoft.com/en-us/library/ms536651.aspx để có thêm thông tin 
về Internet Explorer và https://devel illa.org/en/DOM/window.open dé 
có thém thóng tin vé Firefox và dó 


BẢNG 11-3 Mót số đặc tính của c 
của đối tượng window. 


sử dụng trong phương thức open() 


Tên đặc tính Mô tả 


- - Xác dinh có hiên thi thanh công cu cá nhân hoăc thanh công cu dánh dâu trang 
directories trong cửa sổ mới hay không. Người dùng có thé cấu hình lại trong Firefox. 


height Độ cao tính bằng pixel của cửa số mới. 
left Khoảng cách tính bằng pixel từ cạnh trái của màn hình tới vị trí nơi cửa sổ mới sẽ 
được đặt. 


. Quy dinh thanh địa chi (location bar hay address bar) có được hiển thi hay không. 
location Trong IE7 và các phiên bán mới hon thanh công cụ luôn được hiển thi, còn firefox 
thi có thể thay đối để luôn hiên thi nó, vì thế tùy chon này dần trở nên lỗi thời. 
menubar Quy định thanh menu có được hiển thị trong cửa sổ mới không. 


Quy định người dùng có thể thay đối kích thước cửa số hay không. Firefox luôn 
cho phép thay đối kích thước các cửa sổ (thân thiện với người dùng). 


scrollbars Quy dinh thanh cuộn có được hiển thi hay không. 


resizable 


Quy định thanh trang thái có được hiển thi trong cửa số mới hay không. Người 


status dùng có thể tự cấu hình trong Firefox. 


toolbar 
oolba Quy định thanh công cu có xuất hiện trong cửa sổ mới hay không. 


Khoáng cách tính bằng pixel từ canh trên của màn hình tới vi trí nơi cửa sổ mới 


top được đặt. 


width Độ rộng tính bằng pixel của cửa sổ mới. 


Một số trình duyệt cho phép người dùng thiết lập hiệu lực cho các tùy chọn trong 
Bảng 11-3. Cháng hạn, ẩn thanh địa chỉ trên cửa sổ mới bằng JavaScript sẽ 
không hiệu quả trên Internet Explorer hoặc Firefox nếu người dùng đã cấu hình 
để thanh này luôn hiển thị. 


Phương thức c1ose( ) của đối tượng window không có tham số. Cách dùng 
c1ose( ) đơn giản như sau: 


window.close() 


Phương thức này không phải lúc nào cũng dáng tin cậy, vi vậy ban đừng bao giờ 
mặc định rằng cửa sổ đã thực sự đóng. Hãy chỉ hi vọng nó đã được đóng. 


Những kinh nghiệ nhất về việc mở 
cửa só 


Mặc dù bạn có thể mở thêm một cửa với ít đặc tính hơn (như minh họa 
trên Hình 11-2) song tôi khuyên bạn không nên làm vậy ngoại trừ những trường 
hợp đặc biệt. 


i£ | httpi//www.braingia.org/books/Javascriptsbs/ 
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HINH 11-2 Một cửa số không có thanh ức năng khác thường thấy trên cửa sô 
trình duyệt. 


Bất kỳ cửa sổ mới mở nào cũng nên bao gồm menu, các phần tử điều hướng và 
thanh dia chỉ. Firefox và IE đều không cho phép JavaScript tắt các tính năng nhu 
thay đối kích thước và các thành phần giao diện như thanh trang thái. Những 
tính năng quan trọng này cho phép người dùng sử dụng trang web và ứng dụng 
để phục vụ nhu cầu của họ hơn là nhu cầu của nhà phát triển. Cách tốt nhất là 
thiết kế trang web với đầy đủ các tùy chọn sao cho người dùng có thể sử dụng 
thoải mái mà không bị ảnh hưởng bởi các thành phần giao diện có sẵn. 


Ban sẽ nhận thấy window. open( ) ngày càng trở nên không cần thiết. Với sự ra 
đời của trình duyệt web theo từng tab, window. open( ) không còn được ưa 
chuộng. Phần tiếp theo hướng dẫn bạn cách mở một tab mới mà không cần bất 
kỳ đoạn JavaScript nào. 


Mở thêm tab mà không cân đến 


JavaScript? 


Trên thực tế, bạn không cần dùng JavaScript để mở một tab mới, dày thực sự là 
điều mà hầu hết các lập trình viên web mong muốn. Thay vào đó, bạn mở tab 
mới bằng cách sử dụng thuộc tính target của thé «a». Cách làm này không ảnh 
hưởng đến thao tác của người dùng trong các trình duyệt nhu Firefox và IE7 
hoặc mới hơn. 

Sau đây là ví dụ về hoạt động của thuộc tính target: 


«a target="Microsoft”" href-z"http://www.microsoft.com" 
id-"mslink"» Bi dén website cüa Microsoft «/a» 


Ví dụ dé mở tab mới không tên: 


«a target="_blank" hrefz"http://www.microsoft.com" id="mslinl 


Thay đối kích thước và di chuyển cửa sô 
JavaScript cũng hỗ trợ thay đổi kíc 
trình duyệt như Firefox có một tùy 
bằng JavaScript. Vì lý do này, chú nên thay đổi kích thước cửa sõ 
bằng JavaScript và tôi sẽ chỉ giới thié gon các phương thức và thuộc tính 
để thực hiện thao tác này. Để tìm hiểu thêm thông tin, tham khảo 
http://support.microsoft.com/kb/287171. 


só trinh duyét. Tuy nhién, các 
ăn chán thay đổi kích thước cửa số 


Trong Chương 9 mục “Lấy thông tin về màn hình” sé trình bày các thuộc tính 
của đối tượng con screen củawindow, bao gồm availHeight và availWidth. 
Các thuộc tính này đôi khi được sử dụng để hỗ trợ việc thay đối kích thước cửa 
sổ trình duyệt. Các phương thức và thuộc tính hữu ích của đối tượng window 
liên quan đến việc di chuyển và thay đổi kích thước cửa số được liệt kê trong 
Bảng 11-4. 


BẢNG 11-4 Các thuộc tính và phương thức liên quan đến di chuyển và thay đổi 
kích thước cửa sổ. 


Thuộc tính/Phương thức Mô tả 

moveBy(x, y) Di chuyển cửa sổ một đoạn x và y pixel theo truc tọa độ tuong ứng. 
moveTo(x, y) Di chuyển cửa sổ đến tọa độ (x, y). 

resizeBy(x,y) Thay đổi kích thước cửa sổ một lượng bằng x, y theo pixel. 


resizeTo(x,y) Thay đổi kích thước cửa sổ thành x, y. 


Bộ định thời 


JavaScript chứa các hàm được gọi là bộ dinh thời (timer) dùng để do thời 
gian xảy ra các sự kiện hoặc ngừng thực thi một đoạn mã trong một khoảng thời 
gian nhất định. 


JavaScript có bốn hàm toàn cục có liên quan tới bộ định thời trong JavaScript: 


= setTimeout( ) 
= clearTimeout() 
= SetInterval() 


= clearInterval() 


Hai hàm cơ bản liên quan đến thiết 
setTnterva1( ). Chúng nhận vào 
gian. Với setTimeout( ), hàm đối oi khi bộ dinh thời hết hạn. Với 
setTnterva1( ), hàm đối số được gotmó khi khoảng thời gian hẹn giờ trôi 
qua. Các hàm trả về một định danh mà bạn có thể sử dụng để xóa hoặc ngừng bộ 
định thời với hàm c1earTimeout() và c1earTnterval(). 


thời là setTimeout() và 
hàm được gọi và khoảng thời 


Các hàm liên quan đến bộ định thời hoạt động theo mili giây chứ không phải 
giây. Đó là điều cần nhớ khi sử dung các hàm này. Không có gi tệ hơn việc thiết 
lập khoảng thời gian là 1 với hy vọng nó sẽ thực thi mỗi giây, chỉ để nhận ra nó 
sẽ thực thi 1000 lần một giây. 


Mách nhỏ 1 giây = 1000 mili giây 


Ví dụ 11-2 (có trong file listing11-2.htm của Tài nguyên đi kèm) minh họa cách 
sử dụng hàm setTimeout() dé hiển thị một hộp thoại thông báo sau 3 giây. 


VÍ DỤ 11-2 Ví dụ về setTimeout(). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title» Bô dinh thời </title> 
«script type-z"text/javascript" data-src="ehandler. Js"></sc 
</head> 
«body 1d=”ma1nBody"> 
<p> Xin chào </p> 
«script type="text/Javascrlipt"”> 
function sendAlert() { 
alert( "Xin chào"); 
} 


function startTimer() { 
var timerID = w1indow. setT1meout (sendAlert, 3000); 
} 


var mainBody = document .getElementById("mainBody"); 
EHandler.add(mainBody, "load", function() { startTimer(); 
</scrlpt> 

</body> 

«/html» 


Ví du 11-2 bao gồm hai hàm SN... startTimer(). Sự kiện 
onload của trang gọi hàm startTimer(),trong đó có một dòng gọi hàm 
setT1imeout( ). Hàm setTimeout () tiếp tục goi hàm sendAlert( ) sau 3 
giây (3000 mili giây). 


Biến timerID chứa định danh trỏ đến hàm setTimeout( ) 
được gọi. Bạn có thé sử dung biến timerID này để hủy bộ định thời nhu sau: 


cancelTimeout(timeID); 


Hàm setTimeout() có thé được goi bởi đoạn mã JavaScript thô thay vì lời gọi 
hàm. Tuy nhiên, bạn nên sử dụng lời gọi hàm vì cách dùng mã JavaScript có thể 
øây ra lỗi trong một số trình duyệt. 


Bài tập 


1. Tao trang web chứa hàm xử lý sự kiện onclick kết nối đến một liên kết 


bằng cách sử dung sự kiện tại chó của DOM 0. Hàm xử ly sự kiện cần hiến 
thị hộp thoại thông báo "Ban đã nhân vào đây". 


2. Thay đổi trang web được tạo trong Bài tập 1 để sử dụng kiểu xử lý sự kiện 
mới bằng cách sử dụng file ehandler.js (Xem Tài nguyên đi kèm), kết nối 
cùng sự kiện c1ick/onclick để hiển thị hộp thoại thông báo đã tao trong 
Bài tập 1. 


3. Tạo một trang web chứa liên kết den http: ⁄⁄www.microsoft. com. Cài 
đặt để liên kết này được mở trong một tab mới. 


Chuong 12 
Tao và su dung cookie 


Sau khi doc xong chương này, bạn có thể: 


» Hiểu rõ về cookie HTTP. 

» Tao cookie bằng JavaScript và gửi cookie tới trình duyệt. 

= Nắm được cách thiết lập thời gian hết han cho cookie. 

4 Nắm được cách thiết lập đường dẫn và domain cho cookie. 


» Đọc cookie từ trình duyệt và phân tách nội dung của cookie. 


Tìm hiểu về co 


Cookie HTTP (Hypertext Transfer Pr là những phần dữ liệu nhỏ được gửi 
nhận qua lại giữa client (thường là trình duyệt) và server. Cookie được sử dụng 
để theo dõi các thông tin trạng thái của ứng dụng (ví dụ như vị trí của bạn trong 
ứng dụng), từ thông tin về phiên làm việc tới các thông tin truy cập như ID 
người dùng (dù vậy có rất nhiều lý do không nên lưu ID người dùng hoặc các 
thông tin cá nhân khác trong cookie). 


Cookie HTTP được mô tả chỉ tiết trong RFC 2965 — bạn có thể tìm thấy ở đây 
nhiều thông tin vé cookie hơn cả những gì ban cần. Bạn có thé tra cứu RFC 
2965 tai địa chỉ http://www.rfc-editor.org/cgi-bin/rfcdoctype.pl? 
loc-RFC&letsgo-2965&type-ftp&file format-txt. 


Cookie và tính riêng tu 


Mặc dù có thé có nhiều rác rối tính riêng tư liên quan tới cookie, nhưng bản 


thân các cookie hoàn toàn vô hại. Lý tưởng nhất đó là các cookie được lưu 
trữ trên bộ nhớ truy cập ngẫu nhiên (RAM) trong khoảng thời gian mà 
khách truy cập vẫn còn mở trình duyệt. Còn trường hợp xấu nhất đó là 


cookie được lưu trữ lầu dài trong các file text trên ổ cứng. 


Cookie không gây ra các vấn đề về tính riêng tư ngoại trừ vấn đề liên quan 
đến thông tin lưu trong chúng. Có một thực tế là người quản trị trang web 
hoàn toàn có thể lưu trữ thông tin nhạy cảm trong cookie và họ cũng có thể 
lưu dữ liệu đó theo những cách không an toàn khác ngoài cookie. Cookie 
hoàn toàn vô hại - vấn đề là do người dùng sử dụng cookie để lưu dữ liệu 


nhạy cảm. Thông tin lưu trong cookie cũng được bảo mật tương tự như dữ 
liệu lưu trên máy tính. Do đó, tôi khuyên bạn đừng bao giờ lưu trữ thông tin 
xác thực cá nhân trong cookie. Hãy đảm bảo an toàn cho dữ liệu truy cập 
của bạn. 


Cookie là một file text thông thường — định nghĩa này là cách đơn giản và cũng 
là thuận tiện nhất để hình dung về cookie. Cookie có thể chứa một vài phần tử 
khác nhau, nhưng phần tử chính của cookie là tập hợp các cáp ten/giatri, đa số 
do người quản trị hoặc lập trình viên thiết lập và là tùy chọn không bát buộc. 


Khi khách truy cập thăm trang web h 
kết tới blog, cookie có thể được I 
có nội dung tương tự như sau: 


ww.braingia.org/ và vào đường liên 
ính của người đó. Cookie này sẽ 


Name: cookie4blog 
Content: sess id02934235 
Domain: www.braingia.org 
Path: / 

Send For: Any type of connection 
Expires: Never 


Trình duyệt lưu trữ cookie trên máy tính của khách truy cập cho tới khi cookie 
đó hết han (trong trường hợp trên, cookie không bao giờ hết hạn). Nếu vẫn người 
đó đó thăm lại trang web, trình duyệt sẽ gửi cookie tới server. Khi đó, server có 
thể nhận ra người dùng và sử dụng một số thiết lập mà người dùng từng chọn để 
tùy biến trải nghiệm của họ. 


Một trong những đặc tính của cookie đó là cookie chỉ được gửi tới server nằm 
trên domain mà cookie đó được thiết lập. Vì vậy, cookie trong đoạn mã trước sẽ 
chỉ được gửi tới server khi domain mà trình duyệt ghé thăm là 
www.braingia.org. Ngoài ra, cookie có thể được thiết lập cờ secure (cookie trong 
ví dụ trên không có cờ secure). Nếu cờ secure được thiết lập, cookie chỉ có thể 
được gửi tới server thông qua một phiên làm việc sử dung giao thức SSL (Secure 


Sockets Layer), ví dụ như thông qua một kết nói HTTPS (Hypertext Transfer 
Protocol Secure). 


Chú ý Các cookie bên thứ ba và thủ thuật để gửi nhận cookie ngoài domain 
không thuộc phạm vi thảo luận của cuốn sách này. 


JavaScript vừa có thể tạo vừa có thể đọc cookie. Phần còn lại của chương này sẽ 
đề cập tới hai chức năng trên. 


Tao cookie với JavaScript 


Ban có thể dùng JavaScript để tao cookie bằng cách sử dung thuộc tính 
document . cookie. Phần này sẽ hướng dẫn cách tao và gửi cookie tới trình 
duyệt của khách truy cập. 


Mách nhỏ Khi làm việc với cool E dung các giá tri chuói don gián 
rất quan trong. Hãy tránh sử dung Ì äng, dấu chấm câu cũng nhu các 
ký tự đặc biệt khác vì những ký tự đó không được phép. Bạn có thể sử dụng 
những ký tự không hợp lệ trên nhưng không phải ở dạng thông thường — bạn 


phải thực hiện thoát các ký tự đó, nếu không, chúng có thể gây ra lỗi cho 
cookie, trang web và trình duyệt. Nói chung cũng giống như các lỗi 
JavaScript và lỗi lập trình web khác, lỗi do các ký tự trên có thể rất tỉnh vi 
và thường khó phát hiện. Khi chưa chắc chắn, bạn chỉ nên sử dụng các ký tự 
chữ và số thông dụng. 


Tìm hiểu một cookie đơn giản 


Cookie phải có tên. Đoạn mã JavaScript ngắn dưới đây thực hiện tạo và gửi một 
cookie tới trình duyệt web: 


var cookName = "testcookie"; 
var cookVal = "testvalue"”; 
var myCookie = cookName + "=" + cookVal; 


document.cookie - myCookie; 


Khi ban truy cập trang web chứa đoạn mã JavaScript trên, đoạn mã sé thiết lập 
một cookie có tên là testcookie trong trình duyệt của ban. Giả sử bạn chấp 

nhận cookie này, khi đó trình duyệt sẽ lưu dữ liệu (testva1ue) cũng nhu các 
thông tin khác về cookie để phục vụ cho mục đích sử dụng trong tương lai. 


Khi sử dụng JavaScript để thiết lập cookie, cookie đó sẽ được thêm vào sau một 
cookie có sẵn bất kỳ. Bạn phải để ý tới đặc điểm này khi đọc cookie. Cần biết 
rằng, để thiết lập các thuộc tính trong một cookie cụ thể, bạn phải nối cặp 
ten/giatri của thuộc tính đó vào cookie khi tạo cookie. Ví du tiếp theo sẽ giúp 
bạn thấy rõ hơn khía cạnh này khi làm việc với cookie trong JavaScript. 


Thiết lập thời gian hết hạn cho cookie 


Ví du trình bày ở phần trước đã tạo ra một cookie thông qua cặp ten/giatri: 
var myCookie = cookName + "=" + cookVal; 


Vé cơ bản, đoạn mã trên giống với đo à sau (cookie này chỉ có tên và tập dữ 


liệu): 


testcookie-testvalue; 


Dé thêm thói gian hết han cho cookie, ban cần thêm thuộc tính expires, lúc 


này cookie sẽ trở thành: 
testcookie-testvalue; expires-Sat, 12 Mar 2011 17aad:51:50 GI 


Việc thêm thời gian hết hạn cho cookie rất đơn giản, bạn chỉ cần gán thời gian 
hết hạn đó vào cuối cookie được gửi đi. Định dạng của thời gian hết hạn rất quan 
trọng. Để định dạng chính xác thời gian hết hạn, bạn cần sử dụng một số hàm 
JavaScript. Trong bài tập tiếp theo, bạn sẽ thực hành tạo và thiết lập thời gian hết 
hạn cho cookie. 


Trước khi bắt đầu bài tập, bạn nên kích hoạt hộp thoại để hiển thị cookie trong 
trình duyệt. Điều này giúp việc gỡ lỗi trở nên dễ dàng hơn, vì mỗi khi server hay 
mã JavaScript gửi cookie tới trình duyệt, bạn sẽ được thông báo nội dung của 
cookie đó. 


Tuy nhiên việc kích hoạt hộp thoại trong Windows Internet Explorer bị coi là 
không an toàn, do đó với bài tập này, bạn cần sử dụng Firefox. Trong Firefox 


phiên bản Windows, nhân vào menu Tools, sau đó chon Options (trong phiên 
bản Firefox cho Linux, nhấn vào menu Edit và chon Preferences). Trong hộp 
thoai Options, nhân vào biểu tượng Privacy, sau đó chon Use Custom Settings 
For History (sử dung các thiết lập tùy chỉnh về lich sử duyệt web) từ danh sách 
thả xuống. Bây giờ chon Ask Me Every Time từ danh sách thả xuống Keep 
Until, giống nhu trong Hình 12-1. 


Options € 


General Tabs Content ^ Applications Privacy Security Sync Advanced 


Tracking 


[^] Tell web sites I do not want to be tracked 


History 


Firefox will: | Use custom settings for history 


c 


v| Remember my browsing history 


Remember download history 


v | Remember search and form history 


'| Accept cookies from sites 


| Accept third-party cookies 


Keep until: | ask me everytime Show Cookies... 


[..] Clear history when Firefox closes Settings... 


Location Bar 


When using the location bar, suggest: | History and Bookmarks ~ 


HINH 12-1 Thay dói thiét láp cookie trong Firefox. 


Mách nhỏ Đừng quên thay đổi những thiết lập này về trang thái ban đầu sau 
khi kiểm tra xong các vấn đề liên quan tới cookie. Những hộp thông báo liên 


tục có thể gây khó chịu vì hầu hết các trang web sử dụng một số lượng 
cookie nhất định. 


Thém thói gian het han cho cookie 


1. Sử dung Microsoft Visual Studio, Eclipse, hoặc một trình soạn thảo khác 


chỉnh sửa file cookie-expire.htm trong thư mục mã nguồn mẫu Chương 12, 
phần Tài nguyên di kém. 


. Trong trang này, bó sung thêm đoạn mã in đậm dưới đây (đoạn mã này có 
trong file cookie-expire.txt và bản hoàn chỉnh có trong file cookie.htm — hai 
file này đều nằm trong Tài nguyên đi kèm của cuốn sách): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd'» 

«html» 

«head» 

«title»Xin chào Cookiec/title» 

«script type-"text/javascript'» 

var cookName = "testcookie":; 


var cookVal = "testvalue4 
P. cookVal; 


var myCookie - cookName 
document.cookie - myCoo 
</script> 

</head> 

<body> 

<p>Xin chào</p> 

</body> 

</html> 


. Cài đặt trang web này lên một server, sau đó sử dung trinh duyệt web để mở, 
bạn sẽ nhận được một hộp thoại thông báo như sau: 


Confirm setting cookie 


i The site 192.168.1.14 wants to set a cookie. 


Shaw Details Allow far Session 


Trong Firefox, nhân vào nút Deny để đảm báo rằng cookie này không được 


lưu trên trình duyệt. Nếu bạn vô tinh chấp nhận cookie này, hãy đóng và mở 
lại trình duyệt. Do đầy là cookie theo phiên làm việc, nên cookie đó sẽ bi xóa 
khi bạn thoát khỏi trình duyệt. Xin chúc mừng — bạn đã hoàn thành xong bài 
tập sử dụng JavaScript để gửi một cookie tới trình duyệt! 


. Sửa lại đoạn mã trên để thêm giá trị thời gian hết hạn. Đoạn mã này phải 
được đặt trước dòng khai báo biến myCookie giống như sau: 


var date = new Date(); 
date.setTime(date.getTime()-604800000) 
var expireDate - date.toGMTString(); 


. Sửa lại dòng khai báo biến myCookie để thêm thời gian hết han cho cookie: 
var myCookie = cookName + "=" + cookVal + ";expires=” + e 
. Toàn bộ đoạn mã lúc này sẽ giống như sau (các dòng bổ sung được in đậm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/htm rict.dtd'» 

«html» 

«head» 

<title>XIn chào Cookie« 
«script type-"text/javas 
var cookName = "testcookie"; 

var cookVal = "testvalue"”; 

var date - new Date(); 
date.setTime(date.getTime()-604800000) 

var expireDate - date.toGMTString(); 

var myCookie = cookName + “=” + cookVal + ";expires-" + e» 
document.cookie - myCookie; 

</script> 

</head> 

<body> 

<p>Xin chào</p> 

</body> 

</html> 


. Khi xem trên trình duyệt, đoạn mã JavaScript của trang web sé gửi tới trinh 

duyệt một cookie cùng với thời gian hết hạn của cookie đúng bằng một tuần 
kể từ ngày bạn truy cập tới trang web. Hộp thoại bạn nhìn thấy sẽ giống như 
hình sau đây. Nhấn vào nút Show Details để mở rộng hộp thoại nếu cần: 


Confirm setting cookie 


i The site 192.168.1.14 wants to set a cookie. 


| Hide Details | Allow for Session | Deny 


Mame: testcookie 
Content: testzalue 
Host: 192.168.1.14 
Path: /]sbs/c12/ 
send For: Any type of connection 
Expires: Monday, July 12, 2010 6:22:22 PM 


Ở bài tập này, bốn dòng mã dà dug 
hạn cho cookie, điều này cho phép 
trong thời gian hoạt động của trình lòng mã đầu tiên thiết lập giá trị 
thời điểm hết hạn. Dòng đầu tiên tạo giá trị ngày tháng và lưu giá trị đó 
vào biến date. Tiếp theo, đoạn mã thiết lập giá trị ngày giờ bằng phương thức 
setTime(). Tham số của phuong thức setT7me( ) là một biểu thức trong đó 
goi tới phương thức getT1me ( ). Phương thức getTime() trả về giá tri ngày 
giờ hiện tại theo đơn vị mili giầy, tính từ ngày 1/1/1970. Giá trị hàm 

getTime( ) biểu diễn cho ngày giờ hiện tại, do đó để xác định thời điểm hết hạn 
cho cookie (trong trường hợp này là 1 tuần), bạn phải tính số giây trong 1 tuần 
(604.800) sau đó nhân số đó với 1000 để chuyển thời gian sang đơn vi mili giây. 
Cộng kết quả đó (604.800.000) với giá trị của hàm getTime( ). Tiếp theo, bạn 
có thể chuyển kiéu của số này sang định dạng chuỗi GMT (Greenwich Mean 
Time) bằng cách sử dung phuong thức toGMTString() của đối tượng date. 


adiéu chinh để thiết lập thời gian hết 
c lưu trữ lâu hơn thay vi chỉ tồn tại 


Cuối cùng, đoạn mã thêm thuộc tính expires vào cookie. Kết quả cuối cùng sẽ 
như sau: 


testcookie-testvalue;expires-Mon, 12 Jul 2010 23:22:22 GMT 


Thiết lập đường dẫn cho cookie 


Trong các ví dụ đã trình bày cho tới nay, trên máy tính chạy thử, trình duyệt gửi 
cookie tới server khi đường dẫn (path) của yêu cầu HTTP đúng bằng 
/jsbs/c12/ vì server này chỉ phuc vụ các trang web từ mồi trường thử nghiệm 
này. Đường dẫn này sẽ khác trong các trường hợp khác, ví dụ như trong môi 
trường của bạn hoặc trên máy tính của bạn. Bạn có thể thay đổi đường dẫn này 
bằng cách thêm một tùy chọn nữa khi thiết lập cookie. Một cách làm phổ biến là 
thiết lập đường dẫn với dẫu gạch chéo (/) để tất cả các yêu cầu của domain ban 
đầu đều có thể truy cập tới cookie đó. 


Giống như tùy chon expires, việc thiết lập tùy chọn đường dẫn đòi hỏi phải 
gán một cặp ten/giatri cho cookie. 


Dưới đây là trang web giống với trang web ở các ví dụ đã xét, trang này chứa 
đoạn mã xác định thời gian hết hạn và thêm tùy chọn mới cho đường dẫn của 
cookie (đoạn mã này được in đậm và nằm trong file cookie-path.htm của Tài 
nguyên di kèm): 
af 
«html» 
«head» 
<title>Xin chào Cookiec/title» 
«script type-"text/javascript'» 
var cookName = "testcookie"; 
var cookVal = "testvalue"”; 
var date - new Date(); 
date.setTime(date.getTime()-604800000) 
var expireDate - date.toGMTString(); 
var path = “;path=/”; 
var myCookie = cookName + "=" + cookVal + ";expires-" + expi 
document.cookie - myCookie; 
</script> 
</head> 
<body> 
<p>Xin chào</p> 


</body> 
</html> 


<!DOCTYPE HTML PUBLIC "-/ 
"http: //www.w3.org/TR/htm 


HTML 4.01//EN" 
.dtd”> 


Đoạn mã trên thêm một dòng mới cho tính năng đường dẫn và thay đối định 


nghĩa của biến myCookie bằng việc cộng thêm biến đường dẫn mới (biến path). 
Với đoạn mã mới trên, cookie được tạo ra sẽ giống như sau: 


testcookie-testvalue;expires-Mon, 12 Jul 2010 23:22:22 GMT;p: 


MG trang web vừa chinh sửa, ban sé thấy một hộp thoai cookie tương tự nhu 
Hinh 12-2 


Confirm setting cookie 


i The site 192.168.1.14 wants to set a cookie. 


Hide Details | Allow for Session | | Deny 


Name: testcookie 
Content: testwalue 
Host: 192.168.1.14 
Path: / 
Send For: Any type of connection 
Expires: Monday, July 12, 2010 6:26:36 PM 


HINH 12-2 Thiết lập đường dẫn trong cookie. 


Thiết lập domain cho cookie 


Các ví dụ từ trước tới nay chưa thiết lập thuộc tính doma1n cho cookie; theo 
mặc định, thuộc tính domain thiết lập host và domain cho server gửi cookie tới 
trình duyệt (tức server gửi đoạn mã JavaScript chứa cookie). Trong các ví dụ 
trên, domain là www.braingia.org. Tuy nhiên, nhiều trang (bao gồm cả 
braingia.org) có thể có nhiều host để phục vụ nói dung HTTP. Ví dụ, có thể có 
một server hoàn toàn riêng biệt tên là images.braingia.org chi để cung cấp hình 
ảnh cho trang braingia.org. Sẽ rất thuận tiện khi thiết lập domain là braingia.org 
để các cookie có thể được dùng chung trên toàn bộ domain. 


Việc thiết lập domain cho cookie cũng tương tự như thiết lập đường dẫn. Gán 
tùy chọn domain cho cookie sẽ thiết lập cho domain một giá trị xác định. Dưới 
đây là trang web tích hợp các thuộc tính đường dẫn, thời gian hết hạn và domain 


cho cookie. Doan má chi dinh và thém thuóc tính domain vào bien myCookie 
được in đậm (và nằm trong file cookie-domain.htm của Tài nguyên di kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Xin chào Cookiec/title» 

«script type-"text/javascript'» 

var cookName = "testcookie"; 

var cookVal = "testvalue"”; 

var date - new Date(); 
date.setTime(date.getTime()-604800000) 

var expireDate - date.toGMTString(); 

var path = ";pathz/"; 

var domain - ";domain-braingia.org"; 

var myCookie = cookName + "=" + cookVal + ";expires-" + expi 
document.cookie - myCookie; 

</script> 
</head> 
<body> 
<p>Xin chào</p> 
</body> 
</html> 


Khi dùng trinh duyét mó trang web này, mót hóp thoai nhu Hinh 12-3 sé xuât 
hiện. 


Confirm setting cookie 


i The site tt.braingia.org wants to set a cookie. 


Hide Details | Allow for Session Deny 


Name: testcookie 
Content: testzalue 
Domain: .braingia.org 
Path: / 
Send For: Any type of connection 
Expires: Monday, July 12, 2010 6:29:40 PM 


HINH 12-3 Thiết lập thuộc tính domain của cookie sao cho cookie đó có thé được doc bất cứ 
đâu trong domain braingia.org 


Mách nhỏ Bạn có thể thiết lập tên n.cụ thể cho cookie để tạo ra các 
cookie chỉ đọc được từ các doma raingia.org hoặc 
someotherspecificcomputer.brai y nhiên, bạn không thể thiết lập 


một domain bên ngoài domain dang Vụ nội dung trang web. Ví dụ, bạn 
không thể thay đối giá trị domain của cookie thành microsoft.com nếu 
cookie đó đang được gửi đi bởi domain braingia.org. Trình duyệt sẽ bỏ qua 
những cookie như vậy. 


Thiết lập bảo mật cho cookie 

Việc thiết lập cờ secure trong một cookie biểu thị rằng cookie đó chỉ được gửi 
khi kết nối sử dụng SSL, ví du như kết nối HTTPS. 

Đoạn mã để thêm cờ secure cho biến myCookie sẽ nhu sau: 


var myCookie = cookName + "=" + cookVal + ";expires-" + expi 


Khi dùng trình duyệt mở trang web này, ngay cả với kết nói HTTP chưa được 
mã hóa, đoạn mã JavaScript trên sẽ tạo ra một cookie như được hiển thị trong 
hộp thoại như trong Hình 12-4. Chú ý rằng tùy chọn Send For hiện là 
“Encrypted connections only" (Chỉ các kết nối mã hóa), trong khi các ví dụ 


trước, giá trị này được thiết lập là *Any type of connection" (Bất kỳ kiểu kết nối 
nào). 


Confirm setting cookie 


i The site tt.braingia.org wants to set a cookie. 


Hide Details Allow for Session Deny 


Mame: testcaokie 


Content: testvalue 
Domain: .braingia.org 
Path: / 
Send For: Encrypted connections only 


Expires: Monday, July 12, 2010 6:30:53 PM 


HINH 12-4 Thiết lập cờ secure cho cookie 


ân thiết để tao cookie bằng 
hiểu cách đọc nội dung cookie với 


Tới lúc này, bạn đã tìm hiểu tất cả 
JavaScript. Phần cuối chương sé giú 
JavaScript. 


Đọc nội dung của cookie với 
JavaScript 


Tới lúc này, bạn đã tim hiểu đoạn mã thực hiện việc gửi cookie tới trình duyệt 
khi bạn truy cập một trang web. Khi dùng trình duyệt truy cập tới trang web mà 
domain và đường dẫn của trang này khớp với cookie lưu trên máy client, trình 
duyệt sẽ gửi tất cả các cookie trùng khớp về server cùng với yêu cầu duyệt trang 
web. Mã JavaScript của trang web có thể truy cập cookie khi nội dung trang web 
được chuyển tới trình duyệt. 


Việc đọc cookie trong mã JavaScript bao gồm việc lấy các cookie từ đối tượng 
document . cookie, sau đó phân tách những cookie đó thành các phần nhỏ có 


thể quản lý được. Để thuc hiện điều này, ta sé dùng tới phuong thức split của 
đối tượng document . cookie vi các cookie được phân tách bởi dấu chấm phẩy, 
tương tự nhu cách thức phần tách thuộc tính của cookie (Xem lại mô tả trong 
phần trước). Dưới đây là ví dụ: 


var incCookies - document.cookie.split(";"); 


Với đoạn mã JavaScript ngắn này, tất cả các cookie sẽ được phân tách và sẵn 
sàng chờ truy cập. Với việc sử dụng vòng lặp for, bạn có thể duyệt qua tất cả các 
cookie sẵn dùng cho domain để tìm ra tên và dữ liệu của từng cookie, như sau 
đây (Chú ý rằng đoạn mã này không kiểm tra các thuộc tính của cookie): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«title»5Boc Cookie</title> 

«script type-"text/javascript'» 

var incCookies - document.cooki 

var cookLength - incCookie 

for (var c = 0; c « cookLe 
alert(incCookies[c 

} 


</script> 
</head> 

<body> 

<p>Xin chào</p> 
</body> 

</html> 


e.split(";"); 
» 


, 


Doan má trén (có trong file readcookie.htm) doc các cookie có sán trén domain 
và gán vào biến incCookies. Các cookie này được phân tách bởi dấu chấm 
phãy. Ví dụ, tôi đã thiết lập một số cookie cho domain braingia.org để phuc 
vụ cho hoạt động thông thường của trang web và các ví dụ trong chương này. 
Bạn có thể dùng đoạn mã trên để đọc tất cả các cookie cho domain này. Hình 12- 
5 và Hình 12-6 hiển thị hai hộp thoại thông báo kết quả. 


The page at http://tt.braingia.org says: 


A testcnnkie=testalLle 


HINH 12-5 Cookie thứ nhất được đọc bởi vòng lặp. 


The page at http://tt.braingia.org says: 


PY _ utmaz239291728.1648332129.1278357622.1278357622.12783576022.1 


HINH 12-6 Cookie thứ hai được đọc bởi vòng lặp. 


cookie chứa dấu bằng (=) để tách 
ï đoạn mã dưới đây. 


Sử dụng vòng lặp for, bạn có thể q 
phần tên và phần dữ liệu của cooki 


var incCookies = document. coö .split(";"); 
var cookLength - incCookies.length 
for (var c = 0; c < cookLength; c++) { 
var pairs = incCookies[c].split("z"); 
var cookieName = pairs[0]; 
var cookieValue - pairs[1]; 
alert("Tén cookie: " + cookieName + " - " + "Giá tri 
* cookieValue); 


j 


Trong đoạn mã này (đoạn mã có trong file readcookie2.htm của Tài nguyên di 
kèm), mỗi cookie incCookie[c] được phân tách tại vị trí dấu bằng (=) và đặt 
vào trong biến pairs. Chỉ số đầu tiên (0) của bien pairs là tên của cookie, chi 
số thứ hai (1) là dữ liệu của cookie đó. Hình 12-7 là kết quả của đoạn mã trên. 


The page at http://tt.braingia.org says: 


PN Mame: testcookie - Value: testvalue 


HINH 12-7 Phân tách cáp ten/giatri tuong ứng với tên và di? liệu của cookie. 


Loai bó cookie 


Không có phương thức tích hợp sẵn dé loai bó cookie bằng JavaScript hoặc cách 
thức khác. Để loại bỏ cookie, đơn giản chỉ cần xóa giá trị của nó và thiết lập thời 
điểm hết hạn của cookie đó bằng một thời điểm trong quá khứ. 


Đoạn mã dưới đây đã được sử dụn 
dữ liệu cho cookie: 


ụ ở phần trước để tạo và thiết lập 


var cookName = "testcookie 
var cookVal = "testvalue"”; 
var date - new Date(); 
date.setTime(date.getTime()-604800000) 

var expireDate - date.toGMTString(); 

var path = ";path-z/"; 

var domain - ";domain-braingia.org"; 

var myCookie = cookName + "=" + cookVal + ";expires-" + expi 
document.cookie - myCookie; 


Bạn có thể xóa cookie này bằng cách thiết lập thói điểm hết han bằng một thời 
điểm trong quá khứ. Chú ý rằng các thành phần nhu name, path, và domain 
phải trùng với cookie đã được thiết lập. Cụ thể, bạn cần ghi đè cookie đang tồn 
tại bằng một cookie đã hết hạn như dưới đây: 


var cookName = "testcookie"; 

var cookVal = ""; 

var date - new Date(); 
date.setTime(date.getTime()-60) 

var expireDate - date.toGMTString(); 


var path = ";pathz/"; 

var domain - ";domain-braingia.org"; 

var myCookie = cookName + "=" + cookVal + ";expires-" + expi 
document.cookie - myCookie; 


Đoạn mã này (xem trong file cookie-delete.htm của phần Tài nguyên di kèm) 
khiến dữ liệu của testcookie bị thiết lập bằng rỗng và thời gian hết hạn được 
thiết lập bằng một thời điểm trong quá khứ. 


Chú ý Khi đoạn mã JavaScript trên thực thi, Firefox sẽ ngay lập tức xóa 


cookie có tên là testcookie đi; tuy nhiên, một số trình duyệt khác vẫn giữ lại 
cookie này cho tới khi đóng trình duyệt. 


Bài tập 


duyệt. Thiết lập thời gian hết hạn 
o với ngày giờ hiện tại. Kiểm tra 
lại xem đoạn mã JavaScript đã ới trình duyệt hay chưa bằng cách 
xem cookie trong khi cookie đó d i&t lập hoặc sau khi cookie được lưu 
trên máy tính. Bạn có thể thực hiện yêu cầu thứ hai của bài tập này bằng 
cách sử dụng JavaScript hoặc xem trong cookie lưu trên máy tính. 


1. Tạo một trang web để gửi cooki 
của cookie đó tại thời điểm sau 


2. Tạo một trang web gửi cookie có thời gian hết hạn là một tuần và thiết lập cờ 
secure. Trang web này có thể giống như trang web trong Bài tập 1, nhưng 
phải đảm bảo cookie được gán một tên khác để hai cookie trong mỗi bài tập 
là hoàn toàn riêng biệt. Tương tự, hãy đảm bảo rằng chỉ có cờ secure của 
cookie trong bài tập này được kích hoạt còn cookie trong Bài tập 1 thì không. 


3. Tạo một trang web để đọc cookie có thiết lập cờ secure. Bạn có nhận được 
cookie đó hay không? Nếu không, bạn cần làm gi để nhận được cookie đó? 


4. Tạo một trang web để doc cookie đã tạo trong Bài tập 1. Sử dụng vòng lặp 
for và câu lệnh điều kiện if để hiển thị hộp thoại alert( ) khi cookie có 
tên đúng như cookie trong Bài tập 1 được tìm thấy trong vòng lặp. Không 
hiển thị hộp thoại alert() đối với các cookie khác. 


Chuong 13 
Làm việc với hinh ảnh trong 
JavaScript 


Sau khi đọc xong chương này, bạn có thể: 
= Nắm được các phuong pháp tao hiệu ứng rollover mới và cũ bằng 
JavaScript. 
» Tài trước ảnh với JavaScript. 
= Tao slideshow ảnh. 


= Cái tiến bản đồ ảnh với JavaScript. 


Tạo hiệu ứng er cho ảnh 


Thuật ngữ hiệu ứng rollover của ảnh (image rollover) chỉ hiệu ứng làm thay đổi 
hình ảnh khi người dùng di chuột lên nó, đây là hiệu ứng cung cấp phản hồi trực 
quan về vị trí chuột trên màn hình. Mặc dù kỹ thuật này hầu như đã được thay 
thế bằng cách sử dụng CSS (cascading style sheets), nhưng vì đây là cuốn sách 
về JavaScript nên tôi sẽ trình bày cách tạo hiệu ứng rollover bằng ngôn ngữ này. 
Ngoài ra, ngay cả khi bạn sử dụng CSS thì kiến thức tạo hiệu ứng rollover bằng 
JavaScript luôn có ích cho bạn trong công việc. 


Hiệu ứng rollover được kích hoạt dựa trên các sự kiện liên quan tới việc di chuột 
trên màn hình, chủ yếu là sự kiện mouseover và mouseout. 


Hiệu ứng rollover đơn giản 
Đặt hàm xử lý sự kiện mouseover và mouseout vào thẻ 1mg để tạo các hiệu 
ứng rollover. Hàm xử lý các sự kiện này sẽ làm hiển thị những hình ảnh khác 


nhau. Đoạn mã HTML dưới đây tao hiệu ứng rollover bằng mô hình xử ly sự 
kiện DOM: 


«img id-"home" name-"img home" data-src=”"box1.png” alt="Home 
mouseover-z'window.document.img home.data-src-'box2.png'" mou 


Phần quan trong nhất của thẻ img này là tên thé (img home), sự kiện 
mouseover, mouseout và mã thuc thi khi các sự kiện được kích hoạt. Tên thẻ 
cho phép bạn dễ dàng truy cập tới ảnh thông qua lời gọi đối tượng 
window.document còn các sự kiện mouseover, mouseout sẽ kích hoạt các 
hành động xảy ra. Khi xem trên trình duyệt, đoạn mã trên mở ra ảnh box1.png 
như trong Hình 13-1. 


i£ Y ( » E] http;//localhost/ex O ~ > X E alier 


` 


HÌNH 13-1 Ảnh box1.png lúc đầu được tải lên trang web. 


Khi di chuột lên ảnh, sự kiện mouseover được kích hoạt và đoạn mã dưới đầy 
sẽ thay đổi nguồn của ảnh thành box2.png: 


window.document.img home. data- src= 'box2. png ' 


Khi trỏ chuột nằm trên ảnh, ảnh sẽ thay đổi như trong Hình 13-2, ảnh mới này có 
hướng phai màu theo chiều ngược lại với ảnh ban đầu. 


HÌNH 13-2 Ảnh thay đổi khi người dùng di chuột trên ảnh. 


Khi di chuột khỏi hình vẽ, ảnh trở lại thành box1.png như ban đầu, đó là do sự 
kiện mouseout đã gọi tới đoạn mã JavaScript sau: 


window.document.img home.data-src-'boxi.png' 


Hiệu ứng rollover hiện đại 


Một phương pháp tao hiệu ứng rollover bằng JavaScript mới hon đó là sử dung 
mô hình đối tượng tài liệu (DOM) và sự kiện onload của đối tượng window. 
(Sự kiện on1oad của đối tượng window đã được đề cập trong Chương 11 “Các 
sự kiện trong JavaScript và làm việc với trình duyệt”). Với việc sử dụng DOM, 
khi trang web gọi tới sự kiện onload, hàm xử lý sự kiện onload sẽ gọi tới một 
hàm JavaScript gán các sự kiện mouseover và mouseout cho tất cả các hình 
ảnh trong tài liệu. 


Sử dụng hiệu ứng rollover hiện đại 


Mặc dù việc sử dụng mô hinh DOM cùng sự kiện onload được cho là “hiệu 
ứng rollover hiện dai" và quả thực nó giúp cho việc viết mã trở nên tinh tế 
hơn, nhưng phương pháp này cũng có thể khiến trang web trở nên cồng kênh 
và kém tương thích khi sử dụng trên các trình duyệt và nền tảng khác. 


Theo quan điểm của cá nhân tôi, việc sử dụng ví dụ trình bày ở trên là có thể 
chấp nhận được, nhất là khi trang webseüa bạn có ít hình ảnh, tuy nhiên đó 
không phải là phương pháp hay. sẽ để các bạn tự chọn phương 
pháp phù hợp cho mình. Nếu trang v Ó nhiều hinh ảnh cần dùng hiệu 
ứng rollover, bạn sẽ thấy rằng ph thứ hai, sử dụng một hàm chung 
để xử lý các sự kiện rollover, giúp viỆ€ Bão tri dé dàng hon. 


Trang web này hoạt động tương tự như ví dụ trong phần trước nhưng lại sử dụng 
đoạn mã như trong Ví dụ 13-1 (Xem thêm trong file listing13-1.txt của thư muc 
mã nguồn mẫu). 


VÍ DỤ 13-1 Một phương pháp khác để tạo hiệu ứng rollover. 


function rollover() { 
var images = document . getElementsByTagName ("img"); 
var imgLength = images.length; //láy số lượng ảnh 
for (var 1 = 0; 1 < imgLength; 1++) { 
images[i].mouseover = mouseOver; 
images[i].mouseout - mouseOut; 
} 
} 


function mouseOver() ( 


this.src - "box2.png"; 


] 
function mouseOut() { 

this.src = "boxi.png"; 
] 


Đoạn mã trên khi được đặt trong hàm xử ly sự kiện onload sé tao ra hiệu ứng di 
chuột đơn giản. Bằng cách sử dụng đối tượng tao sự kiện EHandler trong 
Chương 11 (ehandler.js), bạn có thể thêm sự kiện onload cho thẻ <body>. Đầu 
tiên hãy liên kết tới đoạn mã JavaScript ehandler.js: 


«script type-"text/javascript" data-src=”"ehandler. Js”></scr 1| 


Tiếp theo, gọi hàm ro11over dé đáp ứng lại sự kiện on10ad bằng phương thức 
add của đối tượng Ehand1er. Thêm đoạn mã sau vào cuối đoạn mã HTML: 


«script type-"text/javascript'» 

var bodyEl = document.getElementsByTagName( ''body')[0]; 
EHandler.add(bodyEl,"load",function() { rollover(); }); 
</script> 


Mặc dù có tính năng tương tự nhu du trước, nhưng đoạn mã trong Ví du 
13-1 chưa thật sự linh động. (Bạn sẽ cái-thién đoạn mã này trong phần sau). 
Dưới đây là diễn giải cho đoạn mã này: 


Hàm rollover truy xuất tất cả các phần tử «img» bằng cách sử dung phuong 
thức getE1ementsByTagName( ) của đối tượng document và đặt những phần 
tử đó vào biến images. Tiếp theo, đoạn mã truy xuất ra số phần tử chứa trong 
biến images sử dụng thuộc tính 1ength và lưu kết quả trong biến imgLength. 
Đoạn mã sử dụng giá trị trong biến 1mgLength để duyệt qua tất cả các ảnh. 
Trong vòng lặp, các sự kiện mouseover và mouseout được liên kết tới các hàm 
xử lý tương ứng, đó là mouseOver( ) và mouseout( ). 


Đoạn mã trên chưa hoàn toàn linh động là bởi vì trong các hàm xử lý sự kiện 
mouseOver và mouseOut, thuộc tính src được gán cố định bằng các tên file 
box1.png và box2.png. Điều này không ảnh hưởng øì nếu như bạn chỉ có một 
ảnh và một ảnh thay thế. Tuy nhiên, trên thực tế, một trang web thường chứa 
nhiều ảnh khác nhau nên đoạn mã trên không thể áp dụng được. Ngoài ra, từ 
khóa this dễ gây ra sự nhầm làn khi được gọi trong một hàm khác có liên quan 
tới hàm xử lý sự kiện. Vì thế, đoạn mã này cần được cải tiến. 


Bài tập tiếp theo minh hoa lý cho thuyết cơ bản để tạo ra hiệu ứng rollover. Vòng 
lặp duyệt qua các ảnh (được truy xuất bằng ID) và liên kết sự kiện mouseover 
và mouseout của những ảnh đó tới các hàm cu thể, sau đó những hàm này sé 
gán thuộc tính src bằng tên của ảnh sử dụng cho sự kiện tương ứng. Bây giờ 
bạn sẽ làm cho hàm này trở nên linh hoạt hơn để có thể sử dụng lại trong tương 
lai. 


Bài tập tiếp theo minh họa lý cho thuyết cơ bản để tạo ra hiệu ứng rollover. Vòng 
lặp duyệt qua các ảnh (được truy xuất bằng ID) và liên kết sự kiện mouseover 
và mouseout của những ảnh đó tới các hàm cụ thé, sau đó những hàm này sẽ 
gán thuộc tính src bằng tên của ảnh sử dụng cho sự kiện tương ứng. Bây giờ 
bạn sẽ làm cho hàm này trở nên linh hoạt hơn để có thể sử dụng lại trong tương 
lai. 


Tạo hiệu ứng rollover linh động 


1. Dùng Microsoft Visual Studio, Ecli 
lại file rollover.htm trong thư 
kèm. Thư mục này chứa sáu ản 
aboutdefault.png, aboutover.pn ult.png và blogover.png. Những 
file có tên chứa chuỗi _ default ảnh để hiển thị lúc đầu; những file có 
tên chứa chuỗi _ over là các ánh thay thế. 


hoặc trình soạn thảo khác chỉnh sửa 
13rollover của Tài nguyên đi 
ult.png, homeover.png, 


2. Thay thé các đoạn mã được in đậm dưới đây vào các dòng chú thích TODO 
trong file rollover.htm (đoạn mã in đậm này có thể tìm thấy trong file 
rollover.htm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Rollover</title> 
«script type-z"text/javascript" data-srcz"ehandler.js'»«/s« 
«script type-"text/javascript'» 
function rollover() ( //hàm tao hiéu üng rollover 
var images = document.getElementsByTagName( img"), 
var imgLength = images.length; 
for (var i = 0; i < imgLength; i++) { 
EHandler.add(images[i],"mouseover", funct: 


return function() { 
images[i].src - images[i]. 


}; 

J(1)); 

EHandler.add(images[i],"mouseout", functi« 
return function() ( 

images[i].src - images[i]. 

}; 

}(1)); 

} 


</script> 
</head> 
<body> 
<p>img id-"home" name="img_home" data-src-"home default.pr 
<p>img id-"blog" name="1mg blog" data-src-"blog default.pr 
«p»img id-"about" name-z"img about" data-src-'about default 
«script type-"text/javascript"»//goi hàm tao hiệu ứng rol. 
var bodyEl = document.getElementsByTagName("body")[0]; 
EHandler .add(bodyE1, “loadZ nction() { rollover(); }); 
</script> 
</body> 
</html> 


. Dùng trinh duyệt mở trang web. Ban sé thấy một trang tương tự như ánh 
chup màn hình dưới đây. Nếu việc tái trang web gặp vấn đề, hãy đảm bảo 
rằng các hình ảnh phải được đặt trong thư mục hiện tại, bởi vì thư mục hiện 
tại là nơi mà thé <img> tìm kiếm các ảnh đó. 


4. Di chuột trên các ảnh. Hình ảnh sé thay đổi thành các ảnh thay thế tương 
ứng. Dưới đây là ảnh màn hình khi di chuột lên ảnh Blog: 


Ví dụ này trinh bày một cách tốt hơn để tạo hiệu ứng rollover. Cũng giống nhu 
ví dụ trước, đoạn mã này tạo ra một hàm, sau đó gọi tới hàm đó trong sự kiện 
window.onload. Ngoài ra, đoạn mã này gom tất cả các ảnh cần dùng vào một 
biến có tên là images, sau đó duyệt qua từng ảnh và thêm các hàm xử lý sự kiện 
cho các ảnh đó: 


function rollover() { // Dùng bién images dé luu các ảnh 


var images - document.getElementsByTagName("img"); 
var imgLength = images.length; 
for (var 1 = 0; i < imgLength; 1++) { 
EHandler.add(images[i], "mouseover", function 
return function() (1 
images[i].src - images[i].id 
3 
3 (1)); 
EHand1ler .add(1mages[ 1], "mouseout", function( 
return function() { // Truy xuất đến 
images[i].src - images[i].id 
1; 
3(1)); 


} 


Một lần nữa, ví du này lại sử dung đoạn script đăng ký sự kiện EHandler được 
nhắc tới trong Chương 11, gọi tới phương thức Ehandler.add( ) để dáng ký sự 
kiện mouseover và mouseout cho mỗi ảnh. Hàm này thường được sử dụng để 
đăng ký các sự kiện phức tạp bởi vì Internet Explorer gặp một số vấn 
đề khi xử lý từ khóa this trong hà kiện. 


Trong các trình duyệt khác như Fir óa this đại diện cho phần tử kích 
hoạt sự kiện - trong trường hợp này là 1mg. Tuy nhiên, Internet Explorer không 
đăng ký sự kiện cho tới khi sự kiện đó được sử dụng, vì thế phần tử kích hoạt 
không được đăng ký trong quá trình đăng ký sự kiện (trong vòng lặp for). Đoạn 
mã cần phải nhảy qua một số vòng lặp để truyền tham chiếu tới phần tử kích 
hoạt sự kiện cho Internet Explorer. Trong trường hợp này, chỉ số i được truyền 
vào trong hàm add( ), hàm này sau đó gọi tới một hàm không tên của chính nó. 


Ví dụ này khác với Ví dụ 13-1 bởi vì đã bỏ đi định nghĩa của hàm 
mouseOver ( ) và mouseOut ( ). Với ví du này, ID của mỗi bức ảnh được truy 
xuất bằng lời gọi 1mages[ 1 ]. 1d bên trong hàm. Sau đó, giá trị này được nối 
với chuỗi " over.png" hoặc "_ default.png" tùy thuộc vào hàm tương ứng. 


Việc đảm bảo cho tên của file và thuộc tính id của thé <img> trùng khớp nhau 
là điều rất quan trọng. Dưới đây là thẻ «img» của ví dụ trên: 


<p>img 1d="about” name="img_about” data-src-'about default .pi 


Bởi vì những tên file này được tạo ra trong các hàm xử lý sự kiện dựa vào ID 


của các phần tử, tên file của hinh About phải là aboutdefault.png và 
aboutover.png. Tương tự, tên file phải là homedefault.png và home over.png với 
hình Home. 


Chú ý Dĩ nhiên bạn có thể sử dụng một quy ước đặt tên khác — vấn đề quan 


trọng là quy ước đặt tên mà bạn sử dụng cho các hình ảnh phải khớp với 
những gi được viết trong JavaScript. 


Hàm ro11over( ) trong ví dụ này thu thập tất cả các ảnh trong trang web. Với 
các trang web trên thực tế, không phải lúc nào biến images cũng chứa các hình 
ảnh và có những ảnh có thể không có hiệu ứng rollover. Do đó, một cải tiến nhỏ 
đối với đoạn script trên đó là thêm điều kiện để kiểm tra xem hình ảnh có hiệu 
ứng rollover hay không. Một trong những cách đơn giản nhất là điều chỉnh lại 
quy ước đặt tên cho hinh ảnh để chứa từ rollover trong thuộc tính id của thé 
<img> như sau: 


<p><img id-"rollover about" e-"img about" data-src="rollo' 


Trong đoạn mã mới, vòng lặp sé sü biểu thức chính quy thông qua 
phương thức match( ) dé kiểm tra 1d có chứa từ ro11over hay 
không. Nếu đúng, đoạn mã tiếp tục x eu ứng rollover; ngược lại, đoạn mã 
đơn giản trả về giá trị hàm (return). Hình 13-3 là ví dụ về một trang web có 


bốn hình ảnh, ba trong số những ảnh đó có hiệu ứng rollover. 


HÌNH 13-3 Đây là ví du cho thấy không phải tất cá các ảnh đều có hiệu ứng rollover. 


Khi di chuột lên một hình ảnh bất kỳ trong ba hình ảnh ở phía trên cùng của 
trang web, hinh ánh thay thế sẽ được tải lên. Tuy nhiên, do ID của ảnh thứ tư 
không chứa từ rollover nên ảnh này không được gán hàm xử lý sự kiện 
mouseover và mouseout. Dưới đây là toàn bộ đoạn mã cho ví dụ này (chú ý 
rằng đoạn mã này vẫn cần một số cải tiến). Hãy chú ý tới tên mới của các file 
ảnh. (Bạn có thể xem đoạn mã trong thu muc rolloverregexp của Tài nguyên đi 
kèm.) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title-Rolloverc/title» 
«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 
«script type-"text/javascript'» 
function rollover() { 
var images = document.getElementsByTagName("img"); 
var imgLength - hgth; //só lượng ảnh trên t 
for (var 1 = 0; i gth; i++) { //chi lấy ảnh : 
atch(/rollover/)) { 
dd(images[i], "mouseover", 
return function() { 
images[i].src - imag 


}; 
}(1)); 
EHandler .add(1mages[ 1], "mouseout", fi 
return function() { 
images[i].src = imag 
}; 
}(1)); 


J 
} 
</script> 
</head> 
<body> 
<p><img id-"rollover home" name="img_home" data-src="rollove 


<p><img id="rollover_blog" name="img_blog" data-src="rollove 


<p><img id-"rollover about" namez"img about" data-src-'rollo 


<p><img id-"logo" name-z"img logo" data-src="logo.png” alt=”B 
«script type-"text/javascript'» 

var bodyEl = document.getElementsByTagName("body")[0]; 
EHandler.add(bodyEl," load", function() { rollover(); }); 
</script> 

</body> 

</html> 


Điểm khác biệt giữa đoạn mã này so với đoạn mã trước đó là su thay đổi nhỏ 
trong hàm rollover() và phần tử img trong HTML. Trong hàm rollover(), 
một biểu thức chính quy được đặt trực tiếp trong phương thức match( ) để tìm 
kiếm chuỗi rollover trong thuộc tính id của ảnh. Nếu chuỗi rollover xất 
hiện trong ID, các xử lý cho hiệu ứng rollover sẽ được cài đặt giống nhu trong 
các ví dụ trước. Nếu ngược lại, vòng lặp for sẽ tiếp tục. 


Tải trước ảnh 


Có thể bạn đã để ý thấy một vấn đề k việc với ví dụ về hiệu ứng rollover 
trong các phần trước. Lần đầu tiên hiển thị ảnh thay thế, phải mất một giây để 
ảnh đó hiển thị đầy đủ. Độ trễ này là do ảnh thay thế phải được tải về từ web 
server qua hệ thống mạng trước khi hiển thị trên trình duyệt. 


Đây không phải là vấn đề lớn mà chỉ là chút phiền toái nhỏ khi mở trang web 
trên một kết nối mạng nhanh. Tuy nhiên, trên thực tế, độ trễ trở nên đáng kể 
trong các ứng dụng web, đặc biệt khi người dùng sử dụng kết nối dial-up tốc độ 
chậm. May mắn là bạn có thể tải trước các ảnh đó bằng cách sử dụng mã 
JavaScript. Việc tải trước sẽ lưu trữ các hình ảnh trong bộ nhớ đệm của trình 
duyệt, do đó những hình ảnh này gần như hiển thị ngay lập tức khi người truy 
cập di chuột trên ảnh. 


Cơ sở lý thuyết của việc tải trước ảnh là tạo ra một đối tượng 1mage sau đó gọi 
tới phương thức src( ) của đối tượng này để trỏ tới hình ánh mà bạn muốn tải 
trước. Những gi ban thao tác với đối tượng sau khi gọi phương thức src( ) 
không quan trọng. JavaScript không đồng bộ các lời gọi tải ảnh do đó phần còn 
lại của đoạn script vẫn được thực hiện trong khi hình ảnh tiếp tục được tải ở chế 


độ chay nền. 


Khả năng tải trước ảnh không đồng bộ có ý nghĩa quan trọng khi bạn phải làm 
việc cùng lúc với nhiều ảnh: Bạn phái tạo một đối tượng image mới cho mỗi 
hình ảnh cần tải. Nếu có một loạt ảnh tạo hiệu ứng rollover, mỗi ảnh cần có đối 
tượng và lời goi phương thức src( ) riêng. 


Phiên bản cuối cùng của đoạn mã tạo hiệu ứng rollover kết hợp kỹ thuật tải 
trước. Ví dụ 13-2 trình bày đoạn script tạo hiệu ứng rollover cùng với trang 
HTML; đoạn mã xử lý việc tải trước ảnh được in đậm. Đoạn mã này có trong 
Tài nguyên di kém, thư mục rolloverregexppreload. 


VÍ DỤ 13-2 Tải trước và hiệu ứng rollover. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title-Rolloverc/title» 
«script type-"text/javascri 
«script type-"text/javascr 
function rollover() { 
var images - docum lementsByTagName("img"); 
var imgLength = image ength; 
var preLoad = []; //luu các ảnh sẽ dùng 
for (var i = 0; i < imgLength; i++) ( 
if (images[i].id.match(/rollover/)) { //tài 
preLoad[i] = new Image(); 
preLoad[i].src = images[i].id + ^" ov 
Handler .add(images[i], "mouseover", 
return function() { 
images[i].src = imag 


a-src="ehandler. Js"></scr1 


}; 
}(1)); 
EHandler.add(images[i], "mouseout", 
return function() { 
images[i].src = imag 
}; 
}(1)); 


</script> 
</head> 
<body> 


<p><img id="rollover_home" name="img_home" 
data-src-"rollover home default.png" alt="Home"></p> 


<p><img id-"rollover about" name-z"img about" 
data-src-"rollover about default.png" alt="About"></ 


<p><img id-"rollover blog" name-'"img blog" 
data-src-z"rollover blog default.png" alt="Blog"></p> 


<p><img id-"logo" name="img_ logo" data-srcz"logo.png" 
alt-"Braingia Logo"»«/p» 

«script type-"text/javascript'» 

var bodyEl = document.getElementsByTagName("body")[0]; 
EHandler.add(bodyEl,"load", function() ( rollover(); }); 
</script> 
</body> 
</html> 


ảnh, vì vậy tất cả các quy ước về 
ript như đã được đề cập ở phần trước 


Đoạn mã trên sử dụng quy ước đặt 
việc đồng bộ thuộc tính 7d trong mã 
của chương này đều cần được tuân thủ. 


Làm việc với slideshow 


Bạn có thể sử dụng JavaScript để tạo hiệu ứng “slideshow” (trình chiếu ảnh), 
hoán đổi ảnh bằng một ảnh khác trên cửa sõ trình duyệt. Trong phạm vi chương 
này, bạn sẽ xây dựng một slideshow cho phép người truy cập thay ảnh bằng cách 
nhấn vào các button dé di chuyển sang ảnh sau hoặc ảnh trước đó. Hiệu ứng này 
khác với slideshow hẹn giờ - ứng dụng tự động hoán đổi các ảnh sau một khoảng 
thời gian nhất định. 


Tạo slideshow 


Có nhiều cách để thực hiện tính năng slideshow với JavaScript. Một trong số đó 


là dùng vòng lặp for để duyệt qua từng ảnh, phần này sẽ giới thiệu một phuong 
pháp tạo slideshow đơn giản hơn. 


Đa số các slideshow đều có thiết kế đơn giản mặc dù tôi từng thấy những 
slideshow rất phức tạp. Ví dụ 13-3 đưa ra một phiên bản slideshow chỉ có khả 
năng chuyển đổi sang ảnh tiếp theo. 


VÍ DỤ 13-3 Một slideshow đơn giản (chưa hoàn chỉnh). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title»Ví du tao slideshow«c/title» 
«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 
«script type-"text/javascript'» 
//máng images luu trữ các ảnh sé dùng 
var images - ['home default.png','about default.png', 
'blog default.png','logo.png']; //các ảnh sé dùng 
function nextImage() { //c dén ành tiép theo 
var img = document entById("slideimage"); 
var imgname - img. it(" "); 
var index - imgname 


if (index -- images. gth - 1) { 
index - 0; 
) else { 
1ndex++; 
7 
img.src - images[index]; 
img.name - "image " + index; 
} 
</script> 
</head> 
<body> 


<p><img id-"slideimage" name-"image 0" data-src="home_defaul 
alt-"Home"»2«/p» 

«form name-"slideform"» 

«input type="button" 1d="nextbtn” value="”Next”> 

</form> 

«script type="text/javascript"> 

var nextBtn = document.getElementById("nextbtn"); 
EHandler.add(nextBtn, "click",function() { nextImage(); }); 


</script> 
</body> 
</html> 


Tôi có thể giải thích vê phần HTML trong đoạn mã trên : 


<p><img id-"slideimage" name-"image 0" data-src="home_ defaul 
«form name="”s11deform"”> 

«input type="button" id-"nextbtn" value="”Next”> 

</form> 


Đoạn mã HTML này hiển thị một ảnh, sau đó thiết lập thuộc tính ID và tên cho 
các giá trị cụ thể sẽ được sử dụng sau đó trong JavaScript. Tiếp theo, đoạn mã 
trên tạo ra một button có giá tri Next. 


Phần JavaScript của đoạn mã đầu tiên thực hiện liên kết tới đối tượng EHand1er 
đã được tạo ra trong Chương 11: 


«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 


Phàn chính cüa doan má JavaScrip 
trong slideshow: 


di chuyén dén các ánh tiép theo 


//máng images luu trữ các üng 
var images - ['home default.png','about default.png','blog d 
_10g0.png' ]; 
function nextTmage() { //chuyén đến ảnh tiếp theo 
var img = document.getElementById("slideimage"); 
var imgname - img.name.split(" "); 
var index - imgname[1]; 
if (index -- images.length - 1) ( 
index = 0; 


) else ( 
1ndex++; 
} 
img.src = images[index]; 
img.name = "image_" + index; 


} 


Doan má này tao ra mót mång các ành. 


Chú y Máng lưu các ảnh được tạo trong đoạn mã trên chỉ chứa tên file vì thé 
các file ảnh phải được đặt trong cùng một thư mục với đoạn mã sẽ được thực 
thi. Nếu không, tên của các file ảnh trong mảng phải chứa đường dẫn chính 
xác. 


Tiếp theo, một đoạn script trong phần thân của tài liệu sẽ kết nối hàm 
nextTmage( ) cho sự kiện click của button Next thông qua phương thức 
Ehandler.add( ): 


«script type-"text/javascript'» 

var nextBtn - document.getElementById("nextbtn"); 
EHandler.add(nextBtn, 'click",function() ( nextimage(); }); 
</script> 


Lúc này, khi người dùng nhấn vào button Next, đoạn script sé goi tới hàm 
nextTmage( ). Hàm nextTmage( ) truy xuất đối tượng image từ thé HTML 
<img> thông qua hàm getE1ementByTd( ). Tiếp đến, hàm này thực hiện phân 
tách thuộc tính name tại vị trí ký tự gạch dưới để nhận về ký tự số nằm ở cuối 
thuộc tính name. Ký tự số này đượ ø biến index. 


Phần tiếp theo của đoạn mã thực hi E p so sánh dé kiém tra xem giá tri 
của biến index có bằng độ dài cüa m ages trừ đi 1 hay không. Nếu điều 
kiện này đúng, có nghĩa là người dùng đã xem tới ảnh cuối cùng của slideshow, 
do đó đoạn mã sẽ thiết lập lại giá trị index băng 0 và bắt đầu lại từ đầu. Nếu 
slideshow chưa đi đến ảnh cuối, đoạn mã sẽ tăng giá trị biến 7ndex lên 1. 


Hai dòng cuối của đoạn mã JavaScript thiết lập thuộc tính src cho ảnh mới và 
thiết lập tên tương ứng sao cho khi đoạn mã gọi tới hàm nextImage() trong 
lần tiếp theo thì chỉ số hiện tại có thể được xác định. 


Di chuyển ảnh theo chiều ngược lại 


Có thể bạn cho rằng việc thêm một button mới cho phép di chuyển các ảnh theo 
chiêu ngược lại trong slideshow đơn giản chỉ là sao chép đoạn mã vừa viết, sau 

đó chỉnh sửa một chút để tạo tính năng cho button Previous. Trong đa số trường 
hợp, suy nghĩ trên là đúng. Tuy nhiên, hãy xét một trường hợp đặc biệt khi bạn 

đang ở bức ảnh đầu tiên và muốn chuyển tới ảnh trước đó. Tình huống này làm 
cho việc sử dụng button Previous gặp chút khó khăn. 


Bài tập tiếp theo sử dung lai một số ánh mà ban đã thấy trong các bài tập và ví 
du trước. Những ảnh đó có thé làm cho slideshow trở nên nhàm chán, vi thế ban 
hãy thoải mái thay thế chúng bằng các ảnh khác. Trong ví dụ này, tôi chọn ra 
bốn ảnh cho slideshow, bạn có thể sử dụng nhiều hơn nếu muốn. Tuy nhiên, hãy 
đảm bảo rằng bạn phải sử dụng ít nhất ba ảnh để kiểm thử đầy đủ tính năng 
chuyển tiếp và quay lui slideshow của đoạn mã JavaScript. 


Tạo button Previous 


1. Dùng Visual Studio, Eclipse hoặc một trình soạn thảo khác chỉnh sửa lại nội 
dung của file slideshow.html trong thư mục Chương 13slideshow của Tài 
nguyên đi kèm. 


2. Trong trang đó, thay thế dòng chú thích TODO trong file slideshow.txt bằng 
đoạn mã in đậm dưới đầy: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/ht rict.dtd"> 

«html» 

«head» 

<title>Ví du tao slides 

«script type-z"text/javasc 

«script type-"text/javascript'» 

var images = ['home default.png','about default.png', 
“blog_ default.png','logo.[ 


e» 
data-srcz"ehandler.js"»«/s« 


function nextTmage() { 
var img = document.getElementById("slideimage"); 
var imgname = img.name.split(^ "); 
var index - imgname[1]; 
if (index -- images.length - 1) ( 
index = 0; 
) else ( 
1ndex++; 
} 


img.src = images[index]; 
img.name = “image_” + index; 
J 
</script> 
</head> 
<body> 


<p><img id-"slideimage" name-"image 0" data-src-"home def: 
alt-"Home"»«/p» 

«form name-"slideform"» 

«input type-"button" id-"prevbtn" value-z"Previous'» 

«input type="button" id-"nextbtn" valuez"Next'» 

</form> 

«script type="text/javascript"> 

var nextBtn = document.getElementById(“nextbtn”); 

EHandler.add(nextBtn, "click",function() { nextimage(); }), 

</script> 

</body> 

</html> 


3. Dùng trình duyệt mở trang web này. Ban sé thấy một trang như sau: 


4. Nhãn vào button Next để duyệt qua tất cá các ảnh. Chú y rằng slideshow sé 
bát đầu lại từ ánh đầu tiên khi di chuyển tới ảnh cuối cùng. 


5. Bây giờ hãy thay đổi đoạn mã trên để thêm vào button Previous (đoạn mã 
mới thêm vào được in đậm). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 


«title»Ví du tao slideshow«c/title» 
«script type-z"text/javascript" data-srcz"ehandler.js'»«/s« 
«script type-"text/javascript'» 
var images - ['home default.png','about default.png', 
'blog default.png 
function nextTmage() { //chuyén đến ảnh tiếp theo 
var img = document.getElementById("slideimage"); 
var imgname - img.name.split(" "); 
var index - imgname[1]; 
if (index -- images.length - 1) ( 


index = 0; 
) else ( 
1ndex++; 
} 
img.src = images[index]; 
img.name = "image_" + index; 


} 
function prevImage() { //chuyén dén ånh phía truóc 
var img = document .getElementById(“slideimage”); 
var imgname = im .split(^ "); 
var index - img 
if (index == 0) 
index - 
) else ( 
index--; 
J 


img.src - images[index]; 
img.name - "image " + index; 


ength - 1; 


</script> 
</head> 
<body> 


<p><img id-"slideimage" name-"image 0" data-src-"home def: 
alt="Home"”></p> 


«form name-"slideform"» 

«input type-"button" id-"prevbtn" value-"Previous"» 
«input type="button" id-"nextbtn" valuez"Next'» 
</form> 

«script type="text/javascript"> 

var nextBtn = document.getElementById("nextbtn"); 


var prevBtn = document.getElementById("prevbtn"); 
EHandler.add(nextBtn, "click",function() { nextimage(); }), 
EHandler.add(prevBtn, "click",function() { previmage(); }), 
</script> 

</body> 


</html> 


6. Dùng trinh duyệt mở trang web này. Ban sẽ thấy button Previous xuất hiện. 


7. Kiểm tra chức năng slideshow của trang web bằng cách sử dụng kết hợp cả 


hai button để di chuyển tới các ảnh phía trước và phía sau trong slideshow. 


Đoạn má của bài tập này đã bổ sung thêm một button mới cho chức năng 
Previous trong trang HTML: 


«input type="button" id-"prevbtn" value-z"Previous'» 


Ngoài ra, đoạn mã JavaScript trên cũng thêm một hàm mới là prevTmage( ) để 
chuyển đến các ảnh phía trước: 


function previmage() { 
var img = document.getElementById("slideimage"); 
var imgname - img.name.split(" "); 
var index - imgname[1]; 
if (index == 0) { 
index = images.length - 1; 


) else ( 
index--; 
} 
img.src = images[in 
img.name = "image : 


j 


Đoạn má này rất giống với hàm nex (), ngoai trừ phần điều kiện kiểm 
tra. Nếu index bằng 0, có nghĩa là slideshow đang ở bức ảnh đầu tiên, hàm 
prevTmage( ) cần dịch chuyển đến bức ảnh cuối cùng. Ngược lại, đoạn mã sẽ 
dịch chuyển lùi lại một chỉ số để hiển thị ảnh trước đó. 


Làm việc với các bản đồ ảnh 


Bản đồ ảnh là những ảnh có các vùng đặc biệt được cài đặt để thực hiện một số 
tính năng nhất định, ví dụ như liên kết tới một tài liệu khác. Bản đồ ảnh thường 
được sử dụng trong các bản đồ để chọn ra đất nước hoặc vùng mà khách truy cập 
lưu trú. Bản đồ ảnh cũng được sử dụng trong các menu mặc dù cách dùng này 
không còn phổ biến từ khi kỹ thuật CSS ra đời. 


Không may, tôi không phải là một họa sĩ giỏi để có thể vẽ bản đồ của trái đất 
làm ví dụ. Thay vào đó, tôi đã tao ra một bản đồ nhỏ biểu diễn một phần của bầu 
trời đêm kéo dài từ 44,52 độ vĩ Bắc cho tới -89,58 độ kinh Tây trong những 


tháng mùa hè. Hình vé này được kèm theo đoạn má nguồn mẫu của chương và 
được đặt tên là nightskymapdefault.gif. 


Trong Hình 13-4 có bốn chòm sao: Ursa Minor, Cepheus, Draco và Cassiopeia. 


B http;//localhost/ex D » > X|ể Night Sky 


HÌNH 13-4 Một phần của bầu trời đêm được quan sát từ Stevens Point, Wisconsin. 


Tôi đã chuyển hình vé này thành bản đồ ảnh để khi người dùng nhân vào một 
chòm sao bất kỳ, họ sẽ được liên kết tới trang Wikipedia giới thiệu về chòm sao 
đó. Đoạn mã cho bản đồ ảnh được trình bày trong Ví dụ 13-4 (đoạn mã này có 
trong file mã nguồn mẫu của thư mục Chương 13nightsky). 


VÍ DỤ 13-4 Bản đồ ảnh bầu trời đêm. 


<!DOCTYPE HTML PUBLIC "”"-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«title2Night Sky</title> 

«script type-z"text/javascript"» 

</scrlpt> 

</head> 

<body> 

<p><img id-z"nightsky" namez"nightsky" data-src="n1ghtsky_m 
«map name="sky"> 

«area coords="”"119, 180,264,228” alt="Ursa Minor" shape="REC 
hrefz"http://en.wikipedia.org/wiki/Ursa Minor"» 

«area coords="66, 68,193,170" alt="Draco” shape="RECT"” 
hrefz"http://en.wikipedia.org/wiki/Draco"» 

«area coordsz"36,170,115,246" alt-"Draco" shape-z"RECT" 
hrefz"http://en.wikipedia.org/wiki/Draco"» 

«area coords="118, 249,174,328" alt-"Draco" shape-z"RECT" 
hrefz"http://en.wikipedia.org/wiki/Draco"» 

«area coords="201, 47,298,175" alt-'"Draco" shape="RECT" 
hrefz"http://en.wikipedia.org/wiki/Cepheus (constellation) 
«area coords="334, 95,389,204" alt-'"Cassiopeia" shape-z"RECT 
href-z"http://en.wikipedia.org/wiki/Cassiopeia (constellati 
«/map» 

«/body» 

«/html» 


Đoạn mã HTML trên tạo ra một bán đồ ánh đơn gián, sử dung hé tọa độ điểm 
ảnh biểu diễn các hình chữ nhật nhỏ tương ứng với mỗi chòm sao và ba hình chữ 
nhật để tạo thành hình dạng và phần đuôi của chòm sao Draco. Bạn có thể sử 
dụng JavaScript để cải thiện đoạn mã này. 


Thẻ <area> của bản đồ ảnh hỗ trợ các sự kiện mouseover và mouseout. Sử 


dung những sự kiện này và mã JavaScript, bạn có thé làm cho bản đồ trở nên thú 
vị hơn. Ví dụ, khi người truy cập di chuyển chuột lên một vùng bản đồ, bạn có 
thể tải một ảnh mới để highlight chòm sao tương ứng. Đoạn mã trong Ví dụ 13-5 
dưới đây thực hiện chức năng này bằng cách sử dụng sự kiện mouseover và 
mouseout. Đoạn mã này cũng có trong file mẫu của thư mục Chương 
13nightsky, phần Tài nguyên đính kém. 


VÍ DỤ 13-5 Một bản đồ ảnh đã thêm mã JavaScript. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title»Night Sky</t1tle> 
«script type-"text/javascript" data-src-z"ehandler.js"»«/scri 
«script type-"text/javascript'» 
function loadConst() { 
var areas = document.getElementsByTagName("area"); 
var areaLength = areas.length; //luu số vùng trên ånl 
for (var 1 = 0; 1 ngth; 1++) { 
EHandler. [i], "mouseover", function( 
urn function() { 
document. getElementB: 
"nightsky ma 


Tạ 


+(1)); 
EHandler.add(areas[i]," mouseout", function(i 
return function() (1 
document. getElementB: 
"nightsky ma 


+(1)); 

} //két thúc vòng lặp 
} //két thúc hàm loadConst 
</script> 
</head> 
<body> 
<p>img id="nightsky" name="nightsky" data-src-'nightsky map !: 
isMap useMap="#sky" alt="Bầu trời đêm"></p> 
«map name="”sky”> 
«area id-"ursaminor" coords=”119, 180,264,228” alt="Ursa Mino 
«area id-"draco" coords=”66,68,193,170” alt="Draco” shape=”R 


«area id-"draco" coordsz'36,170,115,246" alt="Draco” shape=" 
«area id-z"draco" coords="118, 249,174,328" alt-z"Draco" shape- 
«area id-"cepheus" coords="201, 47,298,175" alt-'Draco" shape 
hrefz"http://en.wikipedia.org/wiki/Cepheus (constellation)”> 
«area id-z"cassie" coords="334, 95,389,204" alt="Casslopela” sl 
hrefz'"http://en.wikipedia.org/wiki/Cassiopeia (constellation 
</map> 

«script type-"text/javascript'» 

var bodyEl - document.getElementsByTagName("body")[0]; 
EHandler.add(bodyEl," load", function() { loadConst(); }); 
</script> 

</body> 

</html> 


MG trang web này trên trinh duyệt, khi ban di chuyển chuột lên mỗi chòm sao thi 
hình vẽ phác thảo của chòm sao đó sẽ xuất hiện, giống như trong Hình 13-5. 
Đoạn mã JavaScript trên thực ra chỉ là một biến thể nhỏ của đoạn mã tạo hiệu 
ứng rollover mà bạn đã thấy ở các phần trước, nó truy xuất tới các phần tử 
«area» thay vì phần tử <img>. 


var areas = document.getE agName ("area"); 


B llocalhost/example B*3X n Night Sky | 


| ttp,//enu Ikipedia.org/wiki/Ursa Minor 


HÌNH 13-5 Thêm đoạn mã JavaScript vào bản đồ ảnh để tạo hiệu ứng rollover. 


Một cải tiến có thể áp dụng cho đoạn mã này đó là tải trước các ảnh thay thế để 
tạo hiệu ứng rollover cho bản đồ ảnh. (Bạn đã học điều này trong bài tập ở phần 
trước). 


Chú ý Đoạn mã HTML trong ví dụ này không hoàn toàn hợp lệ theo chuẩn 
HTML 4.01 bởi vì các thẻ <area> của chòm sao Draco đều sử dụng chung 
một giá trị 1d. Để làm cho đoạn mã HTML này hợp lệ, mỗi thẻ phải có giá 


trị 1d riêng. Tuy nhiên, điều này làm cho đoạn mã JavaScript trở nên phức 
tạp bởi vì mỗi ID phải được phân tách hoặc phân tích để đảm bảo các ảnh 
phác họa của chòm sao Draco sẽ được tải; nếu không, bạn sẽ phải tải ba ảnh 
khác nhau hoặc tìm một phương pháp phù hợp khác. 


Bài tập 


1. Tạo hiệu ứng rollover cho ảnh, Fred ih và dám báo răng các hàm 
JavaScript nằm tách biệt với phã L; 


2. Sử dung bản đồ ảnh có sẵn trong bài (hoặc một bán đồ ảnh khác mà ban 
thích), hãy tải trước tất cả các ảnh sử dụng trong bản đồ để không cần tải 
những ảnh đó về khi người truy cập di chuột lên các vùng khác. 


Chuong 14 
Su dung JavaScript vói Web 
Form 


Sau khi đọc xong chương này, bạn có the: 


= Nắm được cách sử dung JavaScript để kiểm tra tính hợp lệ cho dữ liệu nhập 
vào web form (form trên trang web). 
= Làm việc với các radio button, các select box và check box, lẫy giá trị và 
thiết lập giá trị cho những phần tử này. 
» Đưa ra các phản hồi dựa trên việc kiểm tra tính hợp lệ, thông qua hộp thoai 
thông báo alert() và thông q ong thông báo chèn vào ngay trên 
trang web. 


» Nắm được những han chế trong 
JavaScript và tìm hiểu ví dụ về 


ra tính hợp lệ trên form bằng 
em tra hợp lệ không đúng cách. 


JavaScript và Web Form 


JavaScript đã được sử dung với web form từ khá lầu — thường với muc đích 
kiểm tra xem liệu người dùng đã điền đầy đủ và chính xác các trường thông tin 
trên form trước khi gửi form đó tới server, đây được gọi là quá trình kiểm tra 
hợp lệ phía client (client-side validation). Trước khi có JavaScript, trình duyệt 
phải gửi form và các thông tin trên form về server để đảm bảo tất cả các trường 
bắt buộc đã được điền đầy đủ, quá trình này được gọi làquá trình kiểm tra hợp lệ 
phía server (server-side validation). 


Quan trong Khi sử dung JavaScript, việc kiểm tra hợp lé vẫn phải được 
thực hiện ở phía server phòng trường hợp người dùng tắt JavaScript hoặc 
người dùng cố ý có hành động phá hoại. 


Hãy nhớ lai hàm alert( ) mà ban đã tìm hiểu trong các chương trước, hàm này 
được sử dụng để minh họa cho các ví dụ đơn giản. Chúng ta sẽ gặp lại hàm 
alert() trong chương này. Hàm alert( ) thường được sử dung để hiển thi 
thông tin phản hồi tới người dùng khi kiểm tra tính hợp lệ của form, mặc dù các 
kỹ thuật mới sử dụng mô hình đối tượng tài liệu (DOM) để hiển thị thông tin 
phản hồi theo cách thân thiện hơn. 


Một trang web với form đơn giản có dạng giống như Hình 14-1. 


E Form đơn gian - Windows Interet Explorer 


UU E tip localhost: v $| X piw P 


or Favorites Fom dongin 


Vi du don gã vè fom 


Tén (bit bube) 


HÌNH 14-1 Mót form don gián trên web. 


Khi người dùng gửi form này về server, mã JavaScript bên trong sé kiểm tra để 


đảm bảo text box (6 văn bản) Tên đã được nhập thông tin. Khi text box Tên 
được nhập, ví du như ^Steve", trang web sé hiển thị tên được nhập nhu trong 
Hình 14-2. 


Message from webpage MÀ 


" 


HÌNH 14-2 Khi form được nhập thông tin, trang web hiển thi câu chào mừng. 


Nếu người dùng không nhập dữ liệu vào text box Tên, đoạn mã sẽ hiển thị hộp 
thoại alert( ) thông báo rằng trường Tên chưa được nhập, nhu trong Hinh 14- 
3. 


Message from webpage ¬~ 


A Tên là thông tin bắt buộc. 


LS 
HÌNH 14-3 Form hiển thị một hộp cánh x Tên bị bỏ trống. 


Đoạn mã thực hiện chức năng trên 
tìm thấy đoạn mã này trong file formv 
này chứa mã HTML như sau: 


ày ở phần dưới đây. Bạn có thể 
.htm, phần Tài nguyên đi kèm. File 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Form don giản</title> 
«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 
«script type-z"text/javascript"» 
function formValid(eventObj) { 
if (document.forms[0].textname.value.length == 0) { 
alert("Tén là thóng tin bát buóc."); 
if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else ( 
window.event.returnValue - false; 


return false; 


} else { 
alert( "Xin chào ” + document.forms[0]. textna 
return true; 

} 

J 

</script> 

</head> 

<body> 

<p>Ví du don gián vé form</p> 

«form action="#"> 

<p>Tên <em>(bắt buóc)«/em»: «input id="textbox1" name="textn: 
type-"text" /></p> 

<p><input id-"submitbuttoni1" type="submit" value=”0K” /></p> 

«script type-"text/javascript'» 

var formEl - document.getElementsByTagName("form")[0]; 

EHandler.add(formEl,"submit", function(eventObj) { formValid 

</script> 

</form> 

</body> 

</html> 


Đâu tiên, đoạn mã JavaScript nằm ng pli tử <head> liên kết tới file 
ehandler.js chứa hàm xử lý sự kiện đãnđ dy dựng trong Chương 11 “Các sự 
kiện trong JavaScript và làm việc với duyệt”. Tiếp theo, đoạn mã này định 
nghĩa một hàm có tên là formvalid() để xử lý dữ liệu nhập vào form: 


function formValid(eventObj) { 
if (document.forms[0].textname.value.length == 0) { 
alert("Tén là thóng tin bát buóc."); 
if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else ( 
window.event.returnValue - false; 


return false; 

) else ( 
alert("Xin chào " + document.forms[O 
return true; 


d 


Trong hàm formVvalid(), điều kiện if sử dung mảng document . forms[]. 


Với việc kiểm tra giá tri chỉ số đầu tiên (0) của mảng này, đoạn mã chi xét tới 
form duy nhất của trang web. Điều kiện if kiểm tra độ dài của thuộc tính 
textname. va1ue trên form có bằng © hay không. Nếu đúng, đoạn mã sẽ sử 
dụng hộp thoại alert() để thông báo lỗi. Ngược lại, đoạn mã hiến thi lời chào 
cùng với nội dung của thuộc tính textname. value. 


Giá trị trả về của hàm formVa11d( ) rất quan trọng. Khi các hàm xử lý sự kiện 
submit hay click được goi và trả về giá tri false, trình duyệt sé tam dừng 
quá trình gửi form. Đó là lý do vì sao việc trả về giá trị fa1se rất quan trọng khi 
việc kiểm tra tính hợp lệ thất bại. Nếu không trả về fa1se, action mặc định vẫn 
sẽ tiếp tục và thực hiện gửi form. Bạn có thể dừng action mặc định này trong hầu 
hết các trình duyệt bằng cách gọi tới phương thức preventDefault(). Tuy 
nhiên, phương thức này không được hỗ trợ trong các phiên bản Windows 
Internet Explorer trước phiên bản 9, do đó đoạn mã trên đầu tiên thực hiện việc 
kiểm tra xem phương thức preventDefault() có được hỗ trợ hay không. Nếu 
được hỗ trợ, đoạn mã sé goi phương thức preventDefault( ); ngược lại, đoạn 
mã sẽ thiết lập giá trị thuộc tính returnValue của đối tượng window. event 
bằng fa1se. 


Một đoạn mã JavaScript ngắn xuất ên tror phần tử HTML <body>, đoạn mã 
này gán sự kiện submit của form t lý sự kiện EHandler: 


var formEl = document. getElementsByTagName( "form" )[0 ]; 
EHandler.add(formEl," submit", function(eventObj) { formvalid 


Chú ý rằng để truy xuất form, hàm formVa11d( ) đã sử dung giá trị của chỉ số 
đầu tiên của mảng document . forms [], trong khi đó định nghĩa biến formE1 
sử dụng phương thức getE1ementsByTagName. Cả hai phương pháp này đều 
hoạt động tốt khi trên trang chỉ có một form duy nhất. Bạn sẽ thường xuyên bắt 
gáp các đoạn mã thực hiện truy xuất form thông qua tên của form như trong 
phần tiếp sau đây. 


Lấy dữ liệu từ form 


Trước khi có thể đưa ra các phản hồi dựa trên dữ liệu form, bạn phải biết cách 
lấy dữ liệu đó. Ví dụ trong phần trước đã đưa ra cách truy cập dữ liệu form sử 
dụng mảng document.forms[] và hàm getElementsByTagName. Phần này 


sẽ giới thiệu một cách khác để thực hiện thao tác này — đó là sử dung thuộc tính 
name của form thay vì sử dụng chỉ số của form. 


Cũng giống như các phần tử khác của trang HTML, bạn có thể thiết lập thuộc 
tính 1d của phần tử form. Dưới đây là ví dụ trong phần trước trong đó thuộc 
tính 1d của form đã được thêm vào: 


«form action="”"#" name="”"testform”> 

<p>Tên <em>(bắt buóc)«/em»: «input id-"textbox1" name="textn: 
type="text" /></p> 

<p><input id-z"submitbuttoni1" type="submit" /></p> 

«/form» 


Bây giờ ban có thể truy cập form sử dụng thuộc tính name thay cho chỉ số như 
sau: 


document.forms["testform" ] 


Sử dụng thuộc tính name rất hữu dụng, vì trong một số trường hợp bạn không 
thể biết chính xác chỉ số của form uốn truy cập tới, dieu này đôi lúc 
xảy ra khi đoạn mã phía server hoặ t tao ra một form động, khi đó ban 
phải tính toán (hoặc tôi tệ hơn là p ii số của form trong tài liệu. Cách 
phù hợp nhất để đảm bảo rằng bạn đúng tới giá trị chỉ số đó là thiết 
lập thuộc tính id của form, sau đó truy cập tới form thông qua id. Bạn cũng có 
thể truy cập trực tiếp tới form theo cách không chuẩn tắc, đó là thông qua đối 
tượng document, nhưng tôi khuyên bạn không nên làm theo cách này: 


document.testform 


Phương pháp truy cập trực tiếp này không nhất quán giữa các trình duyệt và 
cũng không giúp giảm bớt việc viết mã so với cách viết chính tắc như sau: 
document.forms|["testform" ] 


Làm việc với thông tin cua form 


Ban có thé truy cập tới từng phần tử của các form thông qua DOM. Phương thức 
chính xác để truy cập tới từng phần tử rất khác nhau, phụ thuộc vào kiểu phần tử. 
Với các text box và các danh sách chọn - select box (hay còn gọi là menu thả 

xuống), thuộc tính value chứa văn bán mà người truy cập nhập hoặc chọn. Với 


các radio button và check box, ban phải sử dung một phương pháp khác dé xác 
định trang thái của những phần tử này, dày cũng là nội dung của phần này. 


Làm việc với các Select Box 


Select box chứa các nhóm tùy chọn. Dưới đây là ví dụ về đoạn mã HTML tạo 
select box (bạn có thể tìm thấy đoạn mã này trong file selectbox.txt của Tài 
nguyên đi kèm). 


«form 1d=”starform”" action=""> 

Chon mót chóm sao: 

«select name-z"startype" id-'starselect'-» 

«option selected-'selected"» «/option» 

«option value-"Aquila"»Aquilac/option» 

«option value-'Centaurus'»Centaurus«/option» 

«option value-"Canis Major"»Canis Major«/option» 

«option value-"Canis Minor"»Canis Minor</Zopt1on> 

«option value-'Corona Borealis"»Corona Borealis«c/option» 
«option value-z'"Crux'»Crux«/e 
«option value-z"Cygnus"»Cyg ion» 
«option value-z"Gemini"»Ge jon» 
«option value="Lyra">Lyra< 
«option value-"Orion'»0rion«c/Ooption-» 

«option value-'Taurus'»Taurus«/option» 

«option value-"Ursa Major"»Ursa Major«/option» 
«option value-z"Ursa Minor"»Ursa Minor</Zopt1on> 
</select> 

</form> 


Doan má này tao ra mót select box nhu trong Hinh 14-4. 
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HINH 14-4 Select box tao ra từ đoạn mã HTML ở ví dụ trên. 


Khi người dùng nhấn vào một tùy chon, thuộc tính value của select box được 
thiết lập bằng giá trị tùy chọn đó. Trong ví dụ này, thuộc tính va1ue của select 
box startype chứa bất ky giá trị nào được chọn bởi người dùng. Bạn có thể 
truy cập tới thuộc tính này theo cách như sau: 


document.forms["starform"].startype.value 


Với ví dụ cu thé này, bạn cần liên kết một hàm xử ly sự kiện với sự kiện change 


của select box, điều này được thuc hiện với sự trợ giúp của đối tượng EHandler 
đã được tạo ra trong Chương 11. Sự kiện change kích hoạt một hàm mỗi khi tùy 
chọn trong select box thay đổi, ví dụ như khi người dùng chọn một tùy chọn từ 
menu thả xuống. Trang web gán sự kiện change cho ô «select» với sự trợ 
giúp của đoạn mã trong Ví du 14-1, đoạn mã này được thêm vào phần <body> 
của trang web. 


Chú ý Hãy nhớ tham chiếu đoạn mã EHandler trong phần tử «head». Xem 


lại Chương 11 để biết thêm thông tin. 


VÍ DỤ 14-1 Gán sự kiện change cho phần tử <select> sử dụng đoạn mã 
EHandler trong Chương 11. 


«script type="text/Javascrlipt”> 

var selEl = document.getElementById("starselect"); 
EHandler.add(selEl," change", function() ( displayValue(); 
</scrlpt> 


Đoạn mã này sử dụng phương thứ 
kiện change của phần tử «selec này được truy xuất thông qua 
thuộc tính ID, đó là starselect. Ir ờng hợp này, hàm xử lý được gán 
cho sự kiện change là một hàm người dùng định nghĩa, có tên là 
displayValue(), hàm này được trình bày trong Ví dụ 14-2. 


.add( ) để gán một hàm vào sự 


ví DU 14-2 Hàm displayValue() được gọi khi sự kiện change của form 
được kích hoạt. 


//Hàm displayValue hiển thị chòm sao đã chon 

function d1sp1layValue(){ 
var selected - document.forms["starform"].startype 
alert("Ban đã chon " + selected); 


} 


Đoạn mã JavaScript trên chỉ hiển thị giá trị được chọn từ menu thả xuống. Ví dụ, 
khi chon Ursa Minor từ menu thả xuống, hộp thoại alert( ) như trong Hình 14- 
5 sẽ được hiển thị. 


Message from webpage iml 


À Ban dà chon Ursa Minor 


x 
HÌNH 14-5 Chọn một chòm sao thông qua f6fff Saữ dó hiển thị hộp thoai `alertQ)` 


Chú ý Đoạn mã hoàn thiện cho ví dụ này có trong file sel.htm trong thư mục 


mã nguồn mẫu Chương 14 của Tài nguyên đi kèm. 


Mã HTML của select box có chứa thuộc tính selected, thuộc tính này cho biết 
tùy chọn nào sẽ được hiển thị. Ví dụ này chọn trước một tùy chọn rỗng, do đó 
giá trị ban đầu của select box trống. 


«option selected="selected"”"> «/option» 


Ban cũng có thể sử dung JavaScript và DOM để chon. Cách thức chọn băng lập 
trình thường được dùng với các form có nhiều trường nhập liệu sao cho khi 
người dùng lựa chọn trên form sẽ làm một số tùy chọn khác được chọn tự động. 


Trong bài tập sau đây, bạn sẽ tạo form mà một nhà hàng pizza có thể sử dụng để 
nhận đơn đặt hàng. Nhà hàng này chỉ sản xuất một số loại pizza đặc biệt: pizza 
rau, pizza thịt và pizza theo phong cách Hawaii với thịt dám bóng và dứa. Nhà 


hàng muốn tạo một trang web có ba button (nút bấm) cho phép nhân viên làm 
pizza theo dõi các loai pizza được đặt hàng. Những button này cho phép chọn 
trước lớp phủ cho bánh pizza. 


Chọn một tùy chọn với JavaScript 
1. Dùng Microsoft Visual Studio, Eclipse hoặc trình soạn thảo khác chỉnh sửa 
lại file pizza.htm trong thư mục Chương 14 (phần Tài nguyên đi kèm). 


2. Hãy thêm đoạn mã được in đậm dưới đây vào trang này (đoạn mã này nằm 
trong file pizza.txt của Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 
<t1tle>P1zza</tiItle> 
«script type="”"text4@javascript” data-src="ehandler. 
«script type-"t cript”> 
//Gán giá tri c phần chính của bánh Pizza 
//loai Pizza 
function flip(p ) { 
if (pizzatype.value == “Rau đặc biệt”) { 
document. forms[ “p1zzaform“” ]. topp1r 
else if (pizzatype.value == “Thịt đặc biệt 
document.forms[^pizzaform"].toppir 
) else if (pizzatype.value -- "Hawaii") ( 
document.forms[^pizzaform"].toppir 
I 
J 
</script> 
</head> 
<form id="pizzaform" action="#"> 
<p> 


<input id="vegbutton" type="button" name="veggiespecial" 
value="Rau đăc biêt"> 

<input id="meatbutton" type="button" name="meatspecial" 
value="Thit đặc biêt"> 

<input id="hawbutton" type="button" name="hawaiian" 
value-"Hawai"» 

«/p» 


Thành phần chính của lớp phủ bánh: «select name="topping" 
«option value-'cheese" selected="”selected”>Bơ</opt1on> 
«option value="”vegg1es >Rau</opt1on> 

«option value-z"meat"»Thit«/option» 

«option value-"hampineapple"»Dàm bóng & Dứa</opt1on> 
</select> 

</form> 

«script type-"text/javascript"» 

⁄/Xử ly su kiện khi các nút được nhấn 

var vegEl = document. getElementByTd( “vegbutton”); 

var meatEl = document.getElementById("meatbutton"); 

var hawEl - document. getElementByTd( “hawbutton”); 
EHandler.add(vegEl,"click",function() { flip(vegEl); }); 
EHandler.add(meatEl,"click",function() { flip(meatEl); }), 
</script> 

</body> 

</html> 


3. Dùng trinh duyét mó trang web. Ban sé nhin thây mót trang gióng nhu sau: 


Ệ Pizza - Windows Internet Explorer 


QU B. http localhost: v | 


ï Favorites Ém 


Thinh phán chinh ca löp phu bánh Bo 


4. Chon mót button. (Chú ý là select box cho “Thành phân chính" sé thay dói 
tương ứng.) 


Trong tâm của ví dụ này là hàm f17p(): 


//Gán giá trị cho thành phần chính của bánh Pizza dựa vào 1o 
function flip(p1zzatype) { 
if (pizzatype.value == "Rau đặc biệt") { 
document.forms["pizzaform"].topping.value - 
) else if (pizzatype.value -- "Thịt đặc biệt”) { 


document.forms["pizzaform"].topping.value 
) else if (pizzatype.value == "Hawaii") { 

document.forms["pizzaform"].topping.value 
} 


} 


Hàm này kiểm tra giá trị của bién pizzatype được truyền vào, sau đó sử dung 
một lệnh điều kiện để thay đổi tương ứng giá trị của select box topping. 


Trong ví dụ này, phần <head> của trang web liên kết tới đoạn mã xử lý sự kiện 
EHandler và sử dung phương thức EHandler.add để gán sự kiện click cho 
các nút, tương tự như đoạn mã bạn đã thấy trong các chương trước. 


//Xà lý su kiện khi các nút được nhấn 

var vegEl = document.getElementById("vegbutton"); 

var meatEl - document.getElementById("meatbutton"); 

var hawEl = document.getElementById("hawbutton"); 
EHandler.add(vegEl," 'click",function() { flip(vegEl); }); 
EHandler.add(meatEl,"click",function() { flip(meatEl); }); 
EHandler.add(hawEl," "click", ion() { flip(hawEl); }); 


Ví du này cho thấy cách lấy thông rm và làm thế nào để thiết lập 
thông tin trong form. Form này tró don gián và nhà hàng vàn chua 
sản xuất nhiều loai pizza. Tuy nhiên, nhà-hàng vẫn dang phát triển bởi vi pizza 
của nhà hàng rất được ưa chuộng. Các ví dụ tiếp theo sẽ tiếp tục mở rộng form 
này. 


Làm việc với Check Box 


Ví dụ trước đã trình bày về các select box và bạn cũng đã thấy cách sử dụng các 
text box ở phần đầu chương. Một kiểu ô nhập liệu khác nữa đó là check box 
(hộp kiểm hay hộp đánh dấu), cho phép người dùng chọn cùng lúc nhiều phần 
tử. Trang web đặt hàng bánh pizza ở phần trước là ví du hay để minh họa cho 
check box. 


Hãy nhớ lại trong phần trước, khi người dùng chọn một trong ba loại pizza thì 
select box Thành phần chính của lớp phủ bánh: thay đổi tương ứng với 
loại bánh được chọn. Tuy nhiên, trang web đó không cho phép người dùng chọn 
cùng lúc nhiều loại pizza. 


Hinh 14-6 đưa ra một form đặt pizza mới. Người đặt hàng có thé chon nhiều 
thành phần với sự kết hợp tùy ý. 


Xúc xích thường 
Xúc xích Ý 
Dăm bông 

Hạt tiêu xanh 


7 Nám 
“Hành 
Dứa 


HÌNH 14-6 Thay đổi form đặt pizza bằng cách sử dung check box. 


Khi chọn các thành phần của bánh pizza và nhấn vào button Chuẩn bị Pizza, các 
thành phần được chọn sẽ hiển thị trên màn hình như trong Hình 14-7. 


BDLLLLZTLC TE 
| Thành phàn 


Xúc xích thường 
Xúc xích Ý 
Dăm bông 

v Hạt tiêu xanh 
Nâm 

Hành 

Dứa 


Chuẩn bị Pizza 


Chiếc bánh pizza này sẽ có: 


Hạt tiêu xanh 
Nắm 


Hành 


HÌNH 14-7 Đặt bánh pizza thông qua form mới và thêm các phần tử sử dung DOM. 


Đoạn mã thực hiện chức năng này được trình bày trong Ví dụ 14-3 (Xem file 


listing14-3.htm trong Tài nguyên đi kèm). 


VÍ DỤ 14-3 Sử dụng check box trong form đặt hàng. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 


var checkboxes - document.forms["pizzaform 
var newelement = document.createElement("p 
newelement.setAttribute("id","orderheading 


newelement.appendChild(document.createText 
"Chiéc bánh pizza này sé có:")); 


if (document.forms["pizzaform"].to 


- document.createEl 


newelement.setAttribute("id","newe 
document . body .appendChild(neweleme 
newelement.appendChild(document.cr 

document.forms["pizzaform" 


«html» 
«head» 
<title>P1zza</title> 
«script type-z"text/javascript" data-src="ehandler. 
«script type-z"text/javascript"» 
function prepza() { 
document . body . appendChild(newelement ); 
for (var i = 0; 1 < checkboxes; i++) { 
var newelement 
} 
} 
} 
</script> 
</head> 
<body> 


<form id="pizzaform" action="#"> 

<p>Thành phân</p> 

<input type="checkbox" id="topping1" 
name-z"toppingcheck"»Xüc xích 

<input type="checkbox" id="topping2" 
name-z"toppingcheck"»Xüc xích 

<input type="checkbox" id="topping3" 


value="Xúc 
thường<br> 
value="Xúc 
Ý<br> 

value-z"Dám 


name-z"toppingcheck"»Dàm bông<br> 


xích thuón 
xích Y" 


bóng" 


«input type="checkbox" idz"topping4" value="Hạt tiêu xanh" 
name="topp1ngcheck">Hạt tiêu xanh<br> 

<input type="checkbox" 1d="topping5" va1ue="Nấm" 
name="topp1ingcheck">Nấm<br> 

«input type="checkbox" 1d=”topping6” value-z'"Hành" 
name-z"toppingcheck"»Hành«br» 

«input type="checkbox" idz"topping7" vaTue="” Dứa " 
name=topp1ngcheck">Dứa<br> 

«input type="button" id-"prepBtn" name-z"prepBtn" 
value-"Chuán bi Pizza"»«/p» 

«/form» 

«script typez"text/javascript"» 

var prepBtn - document.getElementById("prepBtn"); 

EHandler.add(prepBtn, "click",function() ( prepza(); 3); 

</scrlpt> 

</body> 

</html> 


Phần chính của trang web này là hàm prepza ( ), hàm này bắt đầu bàng việc thu 
thập số ô được đánh dấu chọn trong f ¡zzaform. Các ô này được nhóm lại 
với nhau sử dụng thuộc tính toppi hư sau: 


var checkboxes = document. izzaform"].toppingcheck.le 


Sau khi tạo ra phần tử <p> với tiêu đề, đoạn mã sử dung vòng lặp for để duyệt 
qua từng check box. Từng check box được kiểm tra xem thuộc tính checked có 
được thiết lập hay không: 


if (document.forms["pizzaform"].toppingcheck[i].checked) { 


Nếu thuộc tính checked của check box được thiết lập, đoạn mã tạo ra một phần 
tử <p> mới và thêm vào tài liệu. Kết quả chính là trang web mà bạn thấy trong 
Hình 17-7. (Bạn đã thấy các ví dụ về cách tạo và thêm các phần tử trong Chương 
10 “Mô hình đối tượng tài liệu - DOM"). 


Hãy ghi nhớ ví dụ này, vì một trong các bài tập cuối chương sẽ yêu câu bạn kết 
hợp ví dụ này với tính năng tự động chọn các thành phần cho bánh pizza khi 
người dùng nhãn vào button, giống như ví dụ về select box mà bạn đã thấy trong 
phần trước. 


Sự kiện c1ick của button Chuẩn bi Pizza được gán với phương thức 
EHandler.add() đã được nhắc đến trong Chương 11. 


Làm viéc vói Radio Button 


Các radio button cüng tao ra mót nhóm các tüy chon, nhung khóng gióng nhu 
check box, tai một thời điểm sẽ chi có một radio button trong nhóm được chon. 
Trong tình huống của ví du nhà hàng pizza, người truy cập có thể sử dung một 
radio button để chon loai đế bánh: móng, dày hoặc loai thường. Vi mỗi chiếc 
pizza chỉ có thể có một kiểu đế bánh, nên việc sử dụng radio button là hoàn toàn 
hợp lý. Trang web sau khi thêm các radio button chọn loại đế bánh sẽ trông 
giống như trong Hình 14-8. 


mm 
ÍẾ  http./localhost53505/HTMLPagel.ht.. EI 
ee Ë| http;//localhost53 v | ++] X | p Yahi 


v Favorites (Éttp/lealhot5SI5HIMU..— 


Thànhphán  Đểbảnh 
Xúc xích thường ® Bình thường 
WiXücxich Y  ÔDây 
iDăm bông 
V] Hat tiêu xanh 


© Mong 


HÌNH 14-8 Thêm các radio button dé chon loại dé cho bánh pizza. 


Dưới đây là đoạn mà HTML thuc hiện thêm các radio button này cùng với một 
bảng chứa những button đó (đoạn mã này cũng nằm trong file 
radiobuttonhtml.txt, phần Tài nguyên di kèm): 


<table> 


<tr><td>Thành phần</td><td>Bế bánh«/td»«/tr» 


<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


<td><input type="checkbox" id-"toppingi1" value="Xúc : 
name-"toppingcheck"»Xüc xích thường</Ztd> 

<td><input type="radio" name="crust” value=”Bình thu: 
checkedz"checked" 1d="rad1o1">Bình thường</ti 


<td><input type="checkbox" id-"topping2" value="Xúc : 
name="toppingcheck">Xúc xích Y«/td» 

<td><input type="radio" name="crust” value="Dày" 
id-"radio2" />Dày</td> 


<td><input type=”c id-"topping3" value=”"Dăm 
name-"topp '>Dăm bông</td> 
<td><input type="rad1 ame-"crust" value="Mỏng" 


1d="rad1o3">Mỏng</td> 


<td><input type="checkbox" idz"topping4" value="Hạt 
name="topp1ingcheck">Hạt tiêu xanh</td> 
<td></td> 


<td><input type="checkbox" id="topping5" va1ue="Nấm" 
name-"toppingcheck"»Nám«/td» 
<td></td> 


<td><input type="checkbox" idz"topping6" value="Hành 
name-"toppingcheck"»-Hành«td» 
<td></td> 


<td><input type="checkbox" idz"topping7" valuez"Dua" 
name-"toppingcheck"»Düa«c/td» 
<td></td> 
</tr> 
</table> 


Đoạn mã xử lý các radio button cũng tương tự nhu đoạn mã xử lý các check box 
mà bạn đã thấy. Điểm khác biệt chủ yếu là các radio button có cùng chung một 
tên và nhóm logic, có nghĩa là các radio button được nhóm với nhau và tại một 
thời điểm chỉ có một radio button được chọn. Đoạn mã xử lý các radio button 
được thêm vào trong hàm prepza( ) trông như sau (Xem file radiobuttonjs.txt, 
phần Tài nguyên đi kèm): 


//Biến crusttype - lưu kiểu đế bánh 
var crusttype - document.forms["pizzaform"].crust; //crust - 
var crustlength - crusttype.length; 
for (var c = 0; c < crustlength; c++) { 
if (crusttype[c].checked) ( 
var newelement - document.createElem 
at.setAttr1ibute( "1d", "cruste. 
ody.appendChild(newelement 
.appendChild(document.crea 


Kiểm tra tính hop lệ của dữ liệu 
form 


JavaScript thường xuyên được sử dụng để kiểm tra xem một trường trên form có 
được nhập dữ liệu chính xác hay không. Bạn đã gặp một ví dụ về kiểm tra tính 
hợp lệ trong chương này, trong đó form yêu cầu phải điền thông tin tên vào text 
box. Nếu không có thông tin nào được nhập vào trường yêu cầu, một cảnh báo 
lỗi sẽ xuất hiện. JavaScript là công cụ rất tốt để kiểm tra tính hợp lệ của dữ liệu ở 
phía client. Tuy nhiên, phía server lại hầu như không sử dụng JavaScript để thực 
hiện kiểm tra tính hợp lệ của dữ liệu. 


Bạn đừng bao giờ giả định rằng những gi server nhận được là hợp lệ. Tôi không 


thể đếm nói có bao nhiêu lập trình viên web đã nói: “Chúng tôi đã sử dung 
JavaScript để kiểm tra tính hợp lệ của dữ liệu, do đó không cần phải kiểm tra dữ 
liệu ở phía server nữa”. Giả định trên có lẽ đã không tính đến một số tình huống 
thực tế. Người dùng có thể tắt JavaScript trong trình duyệt hoặc họ cũng có thể 
gửi các dữ liệu định dang POST và GET tới chương trinh phía server mà không 
tuân theo sự điều hướng của giao diện trình duyệt. Dù bạn áp dụng những kỹ 
thuật gi ở phía client, đó cũng chi là những thủ thuật. Sẽ có người tìm được cách 
qua mặt những thủ thuật đó. 


Điểm mấu chốt là bạn có thể và nên sử dụng JavaScript để kiểm tra trước tính 
hợp lệ của form. Việc kiểm tra trước tính hợp lệ rất hữu ích để phản hồi nhanh 
tới người dùng khi đoạn mã phát hiện ra những sai sót hiển nhiên ở dữ liệu đầu 
vào. Tuy vậy, bạn vẫn phải kiểm tra tất cả thông tin nhập vào ở phía server sau 
khi người dùng gửi dữ liệu. 


Phần này chỉ bàn tới một số cách sử dụng JavaScript để kiểm tra tính hợp lệ phía 
client, nhưng trước khi trình bày, tôi sẽ đưa ra một số ví dụ minh họa sự nguy 
hiểm khi sử dụng JavaScript làm phương tiện duy nhất để kiểm tra tính hợp lệ 
của thông tin trên website. 


Vô hiệu hóa việc k 
JavaScript 


Phần này sử dụng một chương trình phía server để tạo một hệ thống danh mục 
đơn hàng với ba thành phần đơn giản: sản phẩm, số lượng và giá. Mặt hàng là lá 
cỏ được lấy từ bãi cỏ nhà tôi. Nơi tôi ở vừa trải qua một mùa hè khô hạn, do đó 
thời điểm này số cỏ sót lại không còn nhiều - đa số là cây dại và cát, cơ bản nó 
không có vẻ gì là một bãi cỏ. Vì cỏ hiếm như vậy, nên các đơn hàng bị giới hạn, 
mỗi hộ gia đình chỉ được mua tối đa 3 lá cỏ và giá bán cũng rất cao. Tôi sẽ giới 
hạn số lượng mua này bằng cách sử dụng mã JavaScript. 

Tôi đã tạo ra một trang web để bán cỏ. Khi dùng trình duyệt để mở, trang web 
trông giống như Hình 14-9. 


ra tính hợp lệ của 


IE] ht cios Cg v | X | JE tty/loahotil0!0ap |^; IET mo — 


Mô t Steve råt it chăn sóc bãi co, vi thé bãi có của ông không có thiêu co. Sô trọng cực kj hạn 
di. 


Gi $100.00 mói lá co 
S ong dät hàng (ii han 3 lá co môi hộ ga dinh) 


HÌNH 14-9 Một form danh muc đặt hàng. 


Dưới đây là mà HTML và mã JavaScript để tạo trang web này (Ban có thé xem 
thêm trong file validate.htm của Tài nguyên di kém). Hãy chú ý tới cách sử dung 
document . forms (được in đậm) để truy cập tới giá trị được điền trong trường 
Số lượng. Ngoài ra, hãy để ý rằng bạn không thể gửi form về server vì action của 
form, file catalog.php, thực chất không tồn tại. Action của form không quan 
trọng trong ví dụ sau. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Đbặt hàng</t1tle> 
«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 
«script type-"text/javascript'» 
function formValid(eventObj) (1 
if (document.forms["catalogform"][^quantity" 
alert("Giói han 3 don vi/hó gia dinh 
if 0bj.preventDefault) { 
entObj.preventDefault(); 


ndow.event.returnValue = fi 


} 
return false; 
} else { 
return true; 
} 
</script> 
</head> 
<body> 


«form name="catalogform" id="catalogform" action-z"catalog.ph| 
method="POST"> 

<p>Đặt lá có từ bãi cỏ của Steve Suehring</p> 

«div id-"lawndiv"»«img alt="Bãi cỏ chết của Steve Suehring" 

data-src="lawn.png” id-z"lawnpic"»«/div» 

<p>Mô tả: Steve rất ít chăm sóc bãi có, vi thé bãi cỏ của ôn: 
không có nhiều cỏ. Số lượng cực kỳ han ché.«/p» 

<p>Giá: $100.00 mỗi lá cỏ</p> 

<p>Số lượng đặt hàng (Giới hạn 3 lá cỏ mỗi gia đình): <input 
type="text" name=”"quant1ty”></p> 


«input type="submit" value="Đặt hàng”> 

</form> 

«script type="text/javascript"> 

var formEl = document.getElementsByTagName("form")[0]; 
EHandler.add(formEl,"submit", function(eventObj) { formValid 
</script> 

</body> 

</html> 


Chú y Ban có thể cái tiến việc kiểm tra tính hợp lệ bằng cách dám báo 
người truy cập phải đặt hàng với số lượng tối thiểu là 1! 


Khi JavaScript được kích hoạt trong trình duyệt, việc người dùng đặt hàng số 
lượng bằng 3 hoặc ít hơn là hoàn toàn hợp lệ, do đó form sẽ được gửi về kịch 
bản phía server để xử lý yêu cầu, sau đó trả về tổng số lượng đặt hàng, như trong 
Hình 14-10. 


(CR "UXET 


Don dåt hàng lá co ti Steve Suehrime dang dugc xử ly. 
Chi tit don hàng 

Gi: $100.00 

S6 long dit hàng: 3 


Tông chi phi: $300.00 


` 4 
HINH 14-10 Đặt hàng số lượng 3 lá có hoặc ít hơn là hợp lệ, kết quả trả về là tổng giá thành 
số sản phẩm đã đặt hàng. 


Nếu người dùng quay trở lại trang web và JavaScrip vẫn đang được kích hoạt và 
thử đặt hàng số lượng 4 lá cỏ, khi đó một hộp thoai cảnh báo lỗi alert() sẽ 
xuất hiện giống như Hinh 14-11 . 


À Giới hạn 3 lá cò mỗi hệ gia dinh. 


HINH 14-11 JavaScript thông báo lỗi nếu đặt hàng số lượng lớn hơn 3 lá có. 


Cho tới lúc này, trang web vẫn đang hoạt động rất tốt. Bây giờ hãy hình dung 
rằng tôi tắt JavaScript trong trình duyệt. Giao diện trang trông không có gì thay 
đổi khi tôi quay trở lại trang đặt hàng, trang vẫn giống như trong Hình 14-9. Tuy 
nhiên, bây giờ, tôi có thể đặt hàng số lượng 1500 sản phẩm. Đơn giản chỉ cần 
nhập 1500 vào ô số lượng và nhân button Đặt hàng, kết quả trả về từ phía server 
đó là đơn hàng đã được xử lý, giống như trong Hình 14-12. 


| Don dit hàng l cò tì Steve Suehring dang doc xi ly. 


Chi tiet don hàng 


Cii: $100.00 
S0 lrựng dit hàng: 1500 


Tóng chi phi: $150000.00 


HÌNH 14-12 Vì JavaScript đã bi tắt, nên quá trinh kiểm tra tính hợp lệ của đơn hàng bị bỏ qua. 
trước khi dữ liệu được gửi tới server. 


Do ở phía server không thực hiện kiểm tra tính hợp lệ của dữ liệu, nên giá trị đầu 


vào mặc nhiên là hợp lệ, và don hàng được xử ly thành công. Vấn đề duy nhất ở 
đây đó là vườn nhà tôi không có đủ 1500 lá cỏ, do đó đơn hàng này không thể 
thực hiện. 


Bạn có thể không đồng tình với kịch bản này, nhưng đây là một tình huống rất 
phổ biến trong các ứng dụng web. Trên thực tế, tình huống trong ví dụ này còn 
chưa nguy hiểm so với một số tình huống trong đó website cho phép người truy 
cập thay đổi đơn giá trong quá trình đặt hàng mà không quan tâm tới việc kiểm 
tra tính hợp lệ của dữ liệu — vì “không một ai làm như vậy”. Như vậy, người 
dùng có thể thoải mái thay đổi don giá sản phẩm nếu bạn không ngăn cán họ. 


Bạn có thể đưa ra cách giải quyết cho vấn đề này đó là bát buộc người truy cập 
phải kích hoạt JavaScript trước khi đặt hàng — tuy nhiên cách này sẽ không hiệu 
quả. Bạn có thể kiểm tra xem JavaScript được bật hay không, nhưng bạn sẽ 
không bao giờ có thể chắc chắn 100% về điều đó. 


Cách duy nhất để giải quyết vấn đề này là kiểm tra tính hợp lệ của dữ liệu và 
thực thi các quy tắc kiểm tra ở phía server. Phía server phải kiểm tra các quy tắc 
nghiệp vụ để giới hạn số lượng đặt c hiện việc này không tốn nhiều 
thời gian, bạn chỉ cần làm một lần au đó người dùng sẽ không thể đặt 
hàng vượt số lượng quy định. 


Phần này đã cho thấy việc loại bỏ bướ m tra tính hợp lệ bằng JavaScript là 
rất dễ dàng, bạn chỉ cần tắt JavaScript trong trình duyệt. Phần tiếp theo sẽ trình 
bày cách sử dụng JavaScript để kiếm tra tính hợp lệ phía client. JavaScript chỉ 
nên được sử dụng để kiểm tra trước tính hợp lệ ở phía client và nó không nên 
được sử dụng làm phương thức duy nhất để kiểm tra tính hợp lệ của dữ liệu đầu 
vào. 


Kiểm tra tính hop lệ của trường vấn bản 
Ở phần đầu chương, bạn đã gặp một ví dụ về cách kiểm tra tính hợp lệ của một 
trường văn bản. Nếu trường văn bản đó không được điền đầy đủ, hộp thoại 
thông báo alert() sẽ xuất hiện. Trong phần này, ban sẽ hoc cách đưa ra các 
dòng phản hồi chèn trong tài liệu ngay cạnh trường văn bản thay vì sử dụng hộp 
thoại aTert(). 


Dưới đây là đoạn mã thực hiện điều này (bạn có thể tìm thấy đoạn mã này trong 
file mẫu catalog.htm của phần Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
«title-bát hàng</t1tle> 
«script type-"text/javascript" data-srcz"ehandler.js"»«/scri 
«script type-"text/javascript'» 
function formValid(eventObj) { 
if (document.forms["catalogform"]["quantity" 
var submitbtn - document.forms["cata 
var quantityp - document.getElementB 
var errorel - document.createElement 
errorel.appendChild(document.createT: 
"Giói han 3 don vi/hó gia di 
quantityp.appendChild(errorel); 
if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else { 
window.event.returnValue - fi 
} 


turn false; 


} 
urn true; 
} 
} 
</script> 
</head> 
<body> 


<form name="catalogform" id="catalogform" action="catalog.ph 

<p>Đặt lá có từ bãi có của Steve Suehring</p> 

«div id-"lawndiv"»«img alt="Bãi cỏ chết của Steve Suehring" 
data-src="lawn.png” 1d=”lawnp1c”></d1v> 

<p>Mô tả: Steve rất ít chăm sóc bãi có, vi thế bãi cỏ của ôn: 
có nhiều cỏ. Số lượng cực kỳ hạn chế.</p> 

<p>Giá: $100.00 mỗi lá cỏ</p> 

<p>Số lượng đặt hàng (Giới hạn 3 lá cỏ mỗi gia đình): <input 
type="text" name=”"quant1ty”></p> 

«input id-"submitbutton" type="submit" 
value="Đặt hàng'»«/p» 

</form> 

«script type="text/javascript"> 

var formEl = document.getElementsByTagName("form")[0]; 


EHandler.add(formEl,"submit", function(eventObj) ( formValid 
</script> 

</body> 

</html> 


Mách nhỏ Lưu ý rằng việc kiểm tra tính hợp lệ bằng JavaScript trong các ví 
dụ trên được kích hoạt bằng sự kiện submit. Sự kiện submit của toàn bộ 


form được ưu tiên hơn sự kiện click của button Submit vì nó được kích 
hoạt bất kể khi người truy cập nhấn vào button Submit hay nhấn phím Enter 
trên bàn phím. 


Vé cơ bản, đoạn mã trên giống hệt những gi ban đã thấy trong các ví dụ trước. 
Đoạn mã này chỉ kiểm tra xem form có hợp lệ hay không. Nếu form không hợp 
lệ, đoạn mã tạo và thêm một phần tử HTML span cùng với dòng văn bản “Giới 
han 3 đơn vi/hó gia đình” như trong Hình 14-13 thay vì hiến thị hộp thoại cảnh 
báo alert(). 


Mô t Steve råt it chăm sóc bãi cò, vi thé bäi co của ông không có thiêu co. Số lượng cực kỳ hạn ché. 


Giz $100.00 môil co 


Số hrong dit hàng (Giới han 3 lá có môi hô gia đnh): 1500 Gidi han 3 lá có mòi hô 
ga anh 


HÌNH 14-13 Dua ra phản hồi chèn vào trang web thay vì hiển thi hộp thoại thông báo `alert()`. 
Bài tập 


1. Tạo một web form hiển thị hộp thoại thông báo alert() dua trên dữ liệu 


người dùng chọn trên select box. 


. Thêm một số nhóm radio button vào form trong bài tập pizza ở phần đầu 
chương để có thêm ba kiểu kích thước pizza: cỡ nhỏ, cỡ trung bình và cỡ 
lớn. Hiên thi kết quả cùng với đơn đặt hàng pizza. 


. Thiết kế lại hệ thống đặt hàng bánh pizza với các button từ ví dụ pizza ban 
đầu, cho phép người đặt hàng có thể chọn các loại bánh Rau đặc biệt, Thịt 
đặc biệt hoặc Hawaii. Sau đó, những button này cần chọn ra chính xác thành 
phần chính tương ứng với loại bánh đã chọn trong các check box. Với bánh 
pizza Rau đặc biệt, chon Hạt tiêu xanh, Nàm và Hành. Với bánh pizza Thịt 
đặc biệt, chọn Xúc xích thường, Ý và Dăm bông: còn với pizza 
Hawaii, chon Dira và Dăm bón 


Chuong 15 
JavaScript và CSS 


Sau khi đọc xong chương này, bạn có thể: 


= Nắm được nội dung cơ bản về CSS (Cascading Style Sheets). 
4 Nắm được quan hệ giữa JavaScript và CSS. 

= Sử dung JavaScript để thay đổi style của một phần tử don lẻ. 
= Sử dụng JavaScript để thay đối style của một nhóm phần tử. 


= Sử dung JavaScript để cung cấp phản hồi trực quan trên một trang web với 
CSS. 


CSS là gì? 


CSS cho phép bạn có thé tùy chinh giao diện của một trang web. Sử dung CSS, 
ban có thé thay đối màu sắc, font chữ và cách bố trí các thành phần trong trang 
web. 

Hình 15-1 minh họa một trang web cơ bản. Trang web trông khá nhàm chán - ít 
nhất là ở bố cục. 


2 li) trinh vúi JavaScript - Microsoft Internet Explorer a00 
Hè Edt View Favorites Tools Heb 


Qa - Ô AO Asah rates Q OG € L0 3 


‘adess, Mt: localhost Code/ Chuongtitingt-Lhtm “Do 


JavaScript - Hướng dán hoc qua ví du 


"JavaScript Hung din hoc qua vi dy" mt eun sich duge viet bii Steve Suehring, do Microsoft 
Press xuit bit. 


Cuón sách ntn manh vic áp trinh JavaScript eo chin dë mà JavaScript có thë tực thi tën th nen 
tàng, trên nhiêu trinh duyet khác nhau, 


Elme d My Computer 
HÌNH 15-1 Ví du về một trang web đơn gián chưa được áp dung CSS. 


Düng CSS, ban có thé thém style, giáp táng tính thàm my cho trang web trong 
Hinh 15-1 mà không làm thay đối nội dung của trang. Ví du, bạn có thể thay đổi 
font chữ cho tiêu đề và tạo điểm nhãn cho nội dung đặc biệt của trang bằng font 
chữ in đậm như Hình 15-2. 


2 Lâp trinh túi JavaScript - Microsoft Internet Explorer 
. Fe Edt Ven Favorites Tools Heb 


| yo y 9 6 j Sad sr Faves € Ủ'Q ñ "Jd jl 


Mie ht: ocalhost/Code/ Chuongtistingt-.htm 


JavaScript - Hướng dán hoc qua ví du 


"JavaScript - Hung dàn hoc qua ví du" à mot uon sách dug tiết bòi Steve Suehring, do 
Microsoft Press xut bàn, 


Cuón sich han manl v lip tr JavaScript deo din dë m JavaScript có thë thye thi trén bin nèn 
tàng, trên nhiêu trinh duyệt khác nhau, 


jh Computer 
HÌNH 15-2 Trang web tương tự như trang trong Hình 15-1 nhung đã được áp dụng style CSS. 


Sử dụng thuộc tính và bộ chọn 
Cấu trúc cơ bản của CSS là tên thuộc tính CSS (property) theo sau là dấu hai 
chấm (:) và giá tri (value) của thuộc tính nhu sau: 


tenthuoctinh: giatri 


Ban có thể thiết lập các thuộc tính style CSS. Trong Hinh 15-2, thuộc tính 
font-weight tạo chữ in đậm ở dòng thứ hai. Ban có thể tìm thấy danh sách đầy 


đủ các thuộc tính và các giá trị hợp lệ tương ứng trên trang web của tổ chức 
World Wide Web Consortium (W3C): 
http://www.w3.org/TR/CSS21/propidx.html. 


Bạn có thể áp dung thuộc tính CSS cho một nhóm phần tử của tài liệu dua trên 
kiểu phần tử (<p>, <h1>, <a>,...) hoặc cho từng phần tử riêng ré bằng cách chỉ 
định thuộc tính c1ass hoặc thuộc tính id của phần tử. Những nhóm này được 
gọi chung là bó chon (selector). 


Bộ chon chỉ ra phần tử hay những phần tử cần được thiết lập các thuộc tính và 
giá trị cụ thể. Cấu trúc câu lệnh CSS cơ bản với bộ chọn có dạng như sau: 


tenbochon { tenthuoctinh: giatri; } 


Ví dụ, đoạn mã để chuyển toàn bộ các phần tử <h1> trong tài liệu sang font 
Arial sé như sau (xem file ex1.css, phần Tài nguyên di kém): 


h1 { font-family: arial; } 


phần tử nào đó thường có ích, nhưng 
1 trình bày cho một vài phần tử của 


Mặc dù việc áp dụng style cho toàn.b 
bạn sẽ gặp những tình huống chi cå 
một loại thẻ nhất định chứ không p oặc cần định kiểu trình bày cho 
các phần tử thuộc cùng một loại thể cách khác nhau. Bạn có thể thực 
hiện định kiểu trình bày chọn lọc bằng cách sử dụng thuộc tính c1ass hoặc 1d 
của phần tử. Những thuộc tính này cho phép kiểm soát tận gốc cách hiển thị của 
từng phần tử trong tài liệu. Ví dụ, tài liệu có thể có nhiều phần tử <p>, nhưng 
bạn chỉ muốn một số phần tử <p> có font in đậm. Bằng cách sử dụng thuộc tính 
c1ass với CSS thích hợp, bạn có thể áp dụng định dạng cụ thể cho các phần tử 
<p> thuộc lớp đó. Ví du, để tất cả phần tử thuộc lớp bo1dParagraphs được in 
đậm, bạn cần viết đoạn CSS như sau: 


.boldParagraphs { font-weight: bold; } 


Chú ý rằng bộ chon cho một lớp CSS bát đầu bằng dấu chấm. Style in đậm sau 
đó được áp dụng cho bất kì phần tử HTML nào có thuộc tính c1ass chứa giá tri 
boldParagraphs: 


class-"boldParagraphs" 


Đây là ví du một thé sẽ được áp dung style trên: 


«p class="”boldParagraphs">Đoạn này sé được in đậm.</p> 


Ban thậm chí có thể kiểm soát chi tiết hơn với thuộc tính id, từ đó ban có thé 
chọn một phần tử cụ thể với ID biết trước và áp dung style cho nó, nhu ở Hình 
15-2. Cả hai đoạn văn bản “JavaScript - Hướng dẫn học qua ví dụ” là một cuốn 
sách viết bởi Steve Suehring, do Microsoft Press xuất bản” và “Cuốn sách nhấn 
mạnh việc lập trinh JavaScript theo chuẩn để mã JavaScript có thể chạy trên 
nhiều nền tảng, trên nhiều trình duyệt khác nhau” đều nằm trong phần tử <p>. 
Tuy nhiên, câu đầu tiên có ID là tagline, nhờ đó nó được in đậm bằng CSS. 
Sau đây là đoạn HTML: 


«p id="tagline">JavaScript - Hướng dán học qua ví du là một : 
Và đoạn CSS (có trong file ex2.css, phần Tài nguyên đi kèm): 
#tagline { font-weight: bold; } 


Chú ý rằng bộ chọn cho id bắt đầu bằng một dấu tháng (#). 


Áp dụng CSS 


Có một số cách áp dụng style cho với CSS. Bạn có thể: 


= Áp dụng trực tiếp style cho phần tử HTML trong chính phần tử đó. 
= Dua khối thé «style» vào phần <head> của tài liệu. 


» Liên kết đến một file CSS ngoài tương tự nhu cách liên kết đến một file 
JavaScript ngoài. 


Cho đến nay, cách tốt nhất vẫn là sử dung file CSS ngoài — tương tự như cách tốt 
nhất để lập trình với JavaScript là sử dụng file JavaScript ngoài. Sử dụng file 
CSS ngoài giúp tăng khả năng dùng lại và giúp đơn giản hóa đáng kể quá trình 
bảo trì trang web. Giả sử nhiệm vụ của bạn là quản lý website của một công ty 
có hàng trăm trang web và bây giờ bạn được yêu cầu thay đổi thiết kế website, ví 
dụ thay đổi font chữ phần tiêu đề của các trang. Nếu website của bạn sử dụng 
chung một file CSS ngoài, việc thay đối sẽ rất nhanh chóng và dễ dàng vì bạn 
chỉ cần thay đổi trong một file. Nếu CSS nằm trong từng tài liệu, thì chỉ một thay 
đổi nhỏ cũng đòi hỏi khá nhiều thời gian. 


Còn rất nhiều kiến thức về CSS so với nội dung mà một cuốn sách về JavaScript 


có thể đề cập. Nếu ban chua từng làm việc với CSS, và muốn tìm hiểu thêm 
thông tin, bạn có thể đọc bài viết “CSS Overviews and Tutorials” (Tổng quan và 
hướng dẫn vé CSS) trên trang web của Microsoft 
(http://msdn2.microsoft.com/en-us/library/ms531212.aspx). 


Mối quan hé giữa JavaScript và 
CSS 


Bạn có thé sử dung JavaScript để tác động tới nhiều style của tài liệu bằng cách 
sử dụng Mô hình đối tượng tài liệu (DOM) (Xem lại Chương 11 “Các sự kiện 
trong JavaScript và làm việc với trình duyệt”). Với DOM, bạn có thể truy xuất 
một phần tử bằng tên thẻ hoặc ID của nó và thiết lập thuộc tính style của phần 
tỬ. 


phần tử «h1». Nếu bạn đặt một ID đại 
g, bạn có thể truy xuất nó bằng 
ript. Sau đó, bạn có thể sử dụng 
dối tượng style, đây là một cách 
. Sau đây là ví dụ chuyến style sang 


Ví dụ, đoạn tiêu đề trong Ví dụ 15-1 c 
diện cho phần tử <h1> đó, ví dụ n 
phương thức getE1ementById() lỗ Java 
thuộc tính style của phần tử đó dé 
thay đối style cho phần tử bằng JavaS 
một font khác: 


var heading - document.getElementById("heading"); 
heading.style.fontFamily = "arial"; 


Thiết lập style cho phân tử thông qua ID 
Sử dung hàm getElementById() và đối tượng style, nhu trong ví du trên, là 
một cách dễ dàng và hiệu quả để thiết lập style cho phần tử. Ban có thé áp dung 
style bằng cách thiết lập các thuộc tính cho đối tượng style, tuy nhiên tên các 
thuộc tính đó không phải lúc nào cũng giống tên các thuộc tính tương ứng trong 
CSS. Khi tên thuộc tính style trong JavaScript là một từ đơn, nó thường giống 
tên thuộc tính style trong CSS chuẩn, ví dụ nhu margin (lé). Tuy nhiên, khi tên 
thuộc tính CSS có dấu gạch ở giữa, ví du text-align (căn chữ), tên thuộc tính 
trong JavaScript sé trở thành textA11gn. Lưu ý dấu gạch ngang được bỏ đi và 
ký tự viết hoa được dùng để phân biệt từ chính với các từ còn lại. Cách đặt tên 


thuộc tính nhu trên được gọi là came1Case. 


Bảng 15-1 Trình bày một số thuộc tính CSS và các thuộc tính tương ứng trong 
JavaScript. 


Thuộc tính CSS Thuộc tính tương ứng trong JavaScript 
background background 

" Road backgroundAttachment 
background-color backgroundColor 
background-image backgroundImage 
background-repeat backgroundRepeat 
border border 

border-color borderColor 

color color 

font-family fontFamily 

font-size fontSize 

font-weight fontWeight 

height height 

left left 

list-style listStyle 
list-style-image listStylelmage 

margin margin 


margin-bottom 
margin-left 
margin-right 
margin-top 
padding 
padding-bottom 
padding-left 
padding-right 
padding-top 


position 
float 


text-align 


top 
visibility 


marginBottom 
marginLeft 
marginRight 
marginTop 
padding 
paddingBottom 
paddingLeft 
paddingRight 
paddingTop 
position 


styleFloat (trong Windows Internet Explorer); cssFloat (trong các trinh duyét 
khác) 


textAlign 


top 
visibility 


width width 


Một cách dùng JavaScript phổ biến là kiểm tra tính hợp lệ cho dữ liệu nhập vào 
form. Sử dụng CSS với JavaScript có thể giúp bạn tránh dùng các hộp thoại 
alert() và thay vào đó hiển thi phản hồi trực tiếp trên trang ngay cạnh phần 
thông tin nhập sai. Bài tập tiếp theo sẽ hướng dẫn bạn cách sử dụng tính năng 
này. 


Sử dụng CSS và JavaScript để kiểm tra tính hợp lệ của form 


1. Dùng Visual Studio, Eclipse hoặc một trình soạn thảo khác thay đối file 
form.html trong thư mục mã nguồn mẫu Chương 15 (Tài nguyên đi kèm). 


2. Trong trang đó, thay dòng chú thích TODO bằng phần HTML in đậm dưới 
đây: (Bạn có thể tìm thấy đoạn mã này trong file form.txt trong Tài nguyên 
đi kèm): 


<!DOCTYPE HTML PUBLIC "-/ 
"http: //www.w3.org/TR/h 
«html» 

«head» 

<title>Kiểm tra tính hợp 
</head> 

<body> 

«form name-z"formexample" id-z"formexample" action="#"> 
«div id-"citydiv"»Thành phố: «input id-"city" name="city"› 
«div»«input 1d="submit” type-z'"submit"»«/div» 

</form> 

</body> 

</html> 


/DTD HTML 4.01//EN" 
ict.dtd"> 


a form</title> 


3. Dùng trinh duyệt để mở trang. Trang web sẽ nhu sau: 


3 tiến tra tinh hop ca fom Microsoft Internet Explorer 
Fe Edt Vew Favorites Tods Hep 


Ja AAO Os rs Ô OG EUR 3 


Mies ht cts Code/Chuongt5 forn ntm "Do 


W  —- 
Submt Query 


4. Tạo file JavaScript trong thư muc mà bạn đã luu file form.html. Đặt tên file 
này là form.js. 


5. Trong file form.js, thêm đoạn mã dưới đây. Nếu muốn, bạn có thể thay đổi 
giá tri Stevens Point đang được dùng để kiểm tra biến cityField bằng một 
giá trị khác. Lưu file. 


function checkValid(eventObj) { //Kiém tra tính hop lệ 
var cityField = document.forms[O]["city"]; 
if (cityField.value !- "Stevens Point") ( 
var cityDiv = document.getElementById("cil 
cityDiv.style.fontWeight = "bold"; 
cityDiv.style.border = "1px solid black"; 


if (eventObj.preventDefault) { 
eventObj.preventDefault(); 

) else ( 
window.event.returnValue - false; 


return false; 
) else ( 

return true; 
} 


} 


6. MG lại file form.html và tao liên kết đến file JavaScript ngoài, sau đó tao 
thêm sự kiện submit cho tài liệu. File form.html sẽ nhu dưới đây (những 
phần thay đổi được in đậm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Kiểm tra tính hop 
«script type-"text/java 


ja form«/title» 
«script type-"text/java 
</head> 


J data-src="ehandler .js"></s« 
<body> 


jata-src="form.js"></scripi 
<form name="formexample" id="formexample" action="#"> 
<div id="citydiv">Thành phó: «input id="city" name="city": 
<div><input id="submit" type="submit"></div> 
</form> 
«script type="text/javascript"> 
var formEl = document.getElementsByTagName("form")[0]; 
EHandler.add(formEl," submit", function(eventObj) { checkV: 
</script> 
</body> 
</html> 


7. Tải lại trang form.html trên trình duyệt của ban. Trong trường nhập dữ liệu 
Thành phố, nhập chữ test và nhãn Submit Query. Ban sẽ thấy ngay nhãn 
Thành phố được in đậm và có viền xung quanh thé div. 


8. Nhập lại vào trường Thành phố giá trị Stevens Point (hoặc bất cứ giá tri 
nào đã thiết lập ở bước 5) và nhân Submit Query. Màu nền được thay đổi và 
trường nhập trống. Nguyên nhân là vì form tiếp tục hoạt động sau khi gửi dữ 


liệu di (trong trường hợp này, form không thực hiện gi cả). 


Đoạn mã trong ví dụ trên chỉ là một biến thể của đoạn mã được dùng trước đó có 
bổ sung thêm file JavaScript ngoài để thực hiện kiểm tra tính hợp lệ và trả về 
phản hồi bằng CSS. Trong file JavaScript là đoạn mã kiểm tra tính hợp lệ. Đầu 
tiên, đoạn mã truy xuất đối tượng trường văn bản từ form. Tiếp theo, giá trị nhập 
vào trường này sẽ được kiểm tra xem có trùng với Stevens Point hay không. Nếu 
giá trị không phải là Stevens Point, đoạn mã đổi thuộc tính định kiểu trình bày 
font-we1ght của trường văn bản thành in đậm (bold) và thêm thuộc tính viền 
(border). 


Cách làm này có hạn chế là style CSS cho các phần tử lại được thiết lập trong 
đoạn mã JavaScript. Thực tế là, việc bảo trì sẽ dễ hơn rất nhiều khi bạn phân 
tách phần nội dung (HTML), style (CSS) và hành vi (JavaScript). Bạn có thể cải 
tiến ví dụ này bằng cách thiết lập style với bộ chọn dựa trên kiểu phần tử, hoặc 
bằng cách tạo một lớp báo lỗi chung trong CSS và dùng mã JavaScript dé áp 
dụng lớp đó. Phần tiếp theo sẽ lần lượt đề cập đến các phương thức này. 


Thiết lập style ch 
kiểu phần tử 
Dù việc thiết lập style cho phần tử thông qua ID là cách phổ biến để thay đổi 


style trong JavaScript, bạn cũng cần biết cách thiết lập thuộc tính cho tất cả các 
phần tử thuộc một kiểu nào đó. 


tử thông qua 


Hãy nhớ lại các hình chụp màn hình ở phần đầu của chương này, cụ thể là Hình 
15-2. Ví dụ 15-1 là đoạn mã HTML cho trang đó. 


VÍ DỤ 15-1 Đoạn HTML cho Hình 15-2. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Lập trinh với JavaScript«/title» 

«style type="text/css"> 

h1 ( font-family: arial; } 


#tagline ( font-weight: bold; } 


</style> 
</head> 
<body> 


«hi id="heading">JavaScript - Hướng dán hoc qua ví dụ</h1> 
«p id="tagline">"JavaScript - Hướng dán hoc qua ví du" là cu 
<p>Cuốn sách nhấn manh việc lập trinh JavaScript theo chuẩn 
</body> 

</html> 


Chú ý đến hai phần tử <p> trong Ví du 15-1. Phần tử <p> đầu tiên được áp dung 
style font-weight: bold. Bạn có thể sử dung JavaScript để áp dụng thêm các 
style cho tất cả các phần tử <p>. Xem xét đoạn mã trong Ví dụ 15-2, trong đó có 
thêm một số đoạn mã JavaScript (được in đậm) để thay đổi kiểu font của tập hợp 
các phần tử <p>. 


VÍ DỤ 15-2 Sử dụng JavaScript và HTML để thay đối style của phần tử. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html .dtd"» 

«html» 
«head» 
<title>Lập trinh với JavaS 
«style type="text/css"> 
hi { font-family: arial; } 


itle» 


#tagline ( font-weight: bold; } 
</style> 

</head> 

<body> 


<h1 id="heading">JavaScript - Hướng dẫn học qua ví dụ</h1> 

«p» id-"tagline"»"JavaScript - Hướng dán học qua ví dụ" là m 

<p>Cuốn sách nhấn manh việc lập trinh JavaScript theo chuẩn 

«script type-"text/javascript'» 

var pElements = document.getElementsByTagName("p"); 

for (var i = 0; i < pElements.length; i++) { 
pElements[i].style.fontFamily = "arial"; 


</script> 
</body> 
</html> 


Khi xem trên trình duyệt web, trang này hiển thi hai phần tử «p» với font Arial 
như minh họa trong Hình 15-3. 

Đoạn mã JavaScript trong ví dụ này khá đơn giản vì chi sử dụng các hàm mà ban 
đã gặp. Đầu tiên, đoạn mã truy xuất phần tử <p> sử dụng phương thức 
getE1ementsByTagName( ) của DOM và lưu vào biến pE1ements. Sau đó, 
đoạn mã duyệt qua các phần tử trong biến pE1ements bằng vòng lặp for, thay 
đổi thuộc tính style. fontFamily của mỗi phần tử thành Arial. 
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JavaScript - Hướng dán hoc qua ví du 


"JavaScript -Kuwóng dán hoc qua ví du" là môt cuón sách duoc viết boi Steve 
Suehring, do Microsoft Press xuât bản, 


Cun sách nhấn manh vic lp trinh JavaScript theo chuán đ mä JavaScript có hệ hụt i trn 
nhiêu nên tảng, trên nhiêu trinh duyệt khác nhau. 


j My Computer 
HÌNH 15-3 Dùng JavaScript để cùng lúc thay đổi kiểu font của nhiều phần tử. 


Thiết lập các lớp CSS với JavaScript 


Tuân theo đúng định hướng lập trình tách biệt nói dung và ngôn ngữ đánh dấu 
(HTML) khỏi phần style (CSS) và phần mã xử lý hành vi (JavaScript), một giải 
pháp tốt hơn nữa cho việc thay đổi style của các phần tử là tạo lớp trong CSS và 
dùng JavaScript áp dụng lớp đó khi cần, thay vì thay đổi các thuộc tính cụ thể 
nhu font -we1ght và size bằng JavaScript. Phần này hướng dẫn cách thêm 
cũng như gỡ bỏ các lớp CSS cho phần tử. 


Hãy nhớ bạn đã từng tạo lớp CSS như dưới dày: 


.errorClass { 
font-weight: bold; 
border: 1px solid black; 


j 


Bạn có thể áp dung JavaScript cho lớp này bằng cách sử dung thuộc tính 
className như sau: 


//truy xuất phần tử taglin 
var tagLineElement = docu 
tagLineElement.className 


]ementById("tagline"); 
lass"; 


Chú ý cách dùng toán tử += trong đoạn mã. Toán tử này sẽ thêm lớp 
errorClass vào thuộc tính className nhưng không ghi đè lên các lớp đã 
tồn tại. 


Dé gỡ bỏ lớp khỏi phần tử, bạn cần dùng phương thức replace() và biểu thức 
chính quy. Bạn truy xuất phần tử như phần trước và truy xuất danh sách các lớp 
mà phần tử đó thuộc về bằng cách sử dụng thuộc tính className. Cuối cùng, 
bạn thay thế tên lớp muốn gỡ bỏ bằng một biểu thức chính quy: 


//truy xuất phần tử tagline 

var tagLineElement - document.getElementById("tagline"); 
tagLineElement.className - tagLineElement.className.replace 
(/NberrorClass'b/,""); 


Ví du này gỡ bó tên lớp errorC1ass khói thuộc tính className của phần tử 
tagLineElement băng biểu thức chính quy. Biểu thức chính quy tìm biên của 
một ti? (V5), theo sau là chuỗi errorClass và sau đó là biên của một từ khác 
(X5). Đoạn mã thay thế bất kỳ từ trùng khớp nào bằng một chuỗi tráng (""). 


Truy xuất style của phần tử bằng 
JavaScript 


Bạn có thể truy xuất các style của phần tử bằng JavaScript; tuy nhiên, phương 
thức để truy xuất style trong Internet Explorer và các trình duyệt khác không 
giống nhau. Với các trình duyệt theo chuẩn W3C, có thể truy xuất style bằng 
phương thức getComputedSty1e( ); với Internet Explorer, bạn cần sử dung 
thuộc tính mảng currentSty1e. Style được truy xuất là style cuối cùng được 
áp dụng vì nó là style tổng hợp từ tất cả các nguồn CSS bao gồm các file CSS 
bên ngoài và trang style (CSS) bên trong tài liệu. 


Ví dụ 15-3 hướng dẫn cách truy xuất thuộc tính CSS color đã tổng hợp và tính 
toán của một phần tử có ID là heading. Trong ví dụ này, tiêu đề là một phần tử 
<h1>: 


<h1 style="font-family: arial; color: #0000FF;" 1d="heading": 


Trong Ví dụ 15-3, kết quả được hie ag hộp thoại thông báo alert( ). 


VÍ DỤ 15-3 Dùng JavaScript để tr ộc tính CSS color. 


var heading = document.getEle ById("heading"); 
if (typeof heading.currentStyle !- "undefined") ( 
var curStyle - heading.currentStyle.color; 
else if (typeof window.getComputedStyle !- "undefined") ( 
var curStyle - 
document.defaultView.getComputedStyle( 
heading,null).getPropertyValue("colo 


alert(curStyle); 


Khi dùng trinh duyệt xem trang, ban sẽ thấy một hộp thoai thông báo như Hình 
15- 4. Phương thức getComputedSty1e( ) nhận hai đối số: phần tử được truy 
xuất và phần tử giả. Trong hầu hết các trường hợp, chúng ta chỉ sử dụng duy 
nhất phần tử được truy xuất, do đó chúng ta có thể bỏ qua tham số thứ hai bằng 
cách không thiết lập giá trị cho nó, như trong ví dụ trên. 


Message from webp... EE 


` 


0 đoạn mã tương tự để biểu diễn 


Chú ý Firefox trả về rgb(0, 0, 
giá trị màu (color). 


Chỉnh sửa style sheet bằng JavaScript 

Các ví dụ trong phần đầu chương này hướng dẫn cách làm việc với các phần tử 
style độc lập thông qua đối tượng style. Tuy nhiên, có thể bạn muốn thay đổi 
toàn bộ style cho một hoặc nhiều phần tử, hay nói cách khác, bạn muốn thay đổi 
style sheet (file chứa định nghĩa của các style CSS) áp dụng cho một phần tử 
hoặc một lớp các phần tử. Việc này không dễ thực hiện như cách chỉnh sửa style 
đã được học ở những phần trước. 

Khó khăn đầu tiên là bạn phải xác định xem trình duyệt của người truy cập có hỗ 


trợ việc truy xuất các style sheet đã tồn tại hay không. Bạn có thể làm việc này 
bằng cách kiểm tra thuộc tính document . sty1eSheets như dưới đây: 


if (typeof document.styleSheets !- "undefined") { 
|//Trinh duyệt hô trợ truy xuất style sheet. 


} 


Máng document .styleSheets chúa các file style sheet CSS áp dung cho mót 
tài liệu, liệt kê theo thứ tự được áp dung. Điều này có nghĩa là các style sheet 
CSS ngoài khi liên kết trong tài liệu sẽ được áp dung theo thứ tự xuất hiện, bắt 
đầu từ chỉ số 0. Xem đoạn mã dưới đây: 


«link rel="stylesheet" href="ex1.css”" type="text/css" /> 
«link rel="stylesheet" href="ex2.css” type="text/css" /> 


Các style sheet này được đặt thứ tự tương ứng là document .styleSheets[0] 
và document. sty.1eSheets[ 1 ]. Do đó, việc biết thứ tự các style sheet trong 
tài liệu là cần thiết nếu muốn truy xuất style áp dụng cho phần tử trong tài liệu 
đó. 

Sau khi xác định trình duyệt có hỗ trợ style sheet hay không, bạn cần giải quyết 
sự khác biệt giữa Internet Explorer và các trình duyệt theo chuẩn W3C. 


định nghĩa style khai báo trong một 
rình duyệt theo chuẩn W3C truy 
5. Lương tự việc ban phải lập trình 


Internet Explorer cho phép truy xuất cá 
style sheet bằng mảng rules, ngược 
xuất các định nghĩa này bằng mảng 
để hỗ trợ sự khác biệt trong mô hì itta các trình duyệt, bạn cũng phải 
lập trình để xử lý sự khác biệt giữa các duyệt khi truy xuất style sheet CSS. 
Giả sử bạn có một định nghĩa style khai báo như sau: 


hi { font-family: arial; } 
Ví du 15-4 chi ra cách truy xuất style sheet đầu tiên từ một tài liệu. 


VÍ DỤ 15-4 Truy xuất style sheet CSS băng JavaScript. 


if (typeof document.styleSheets !- "undefined") { 
var stylerules; 
if (typeof document.styleSheets[0].rules !- "undef 
stylerules - document.styleSheets[0].rules 
) else { 


stylerules - document.styleSheets[0].cssRu 


} 
} 


Đoạn mã dưới đây, cùng với Ví dụ 15-4, thay đối font của từng phần tử cụ thể 
trong CSS đó sang font khác: 


stylerules[0].style.fontFamily = "courier"; 


Thay đổi tất cá các bộ chon trong file style sheet CSS thành một thiết lập là 
cách làm không phổ biến. Duyệt qua file style sheet để tim bộ chon cụ thể 
thường hữu dung hơn, nhu ở Ví du 15-5. 


VÍ DỤ 15-5 Duyệt style sheet để tìm bộ chọn <h1>. 
for (var i = 0; i < stylerules.length; i++) { 


if (stylerules[i].selectorText.toLowerCase() == "h 
stylerules[i].style.fontFamily - "courier" 
} 


} 


Dưới đây là ví dụ hoàn chỉnh hơn của tính năng này. Giả sử, chúng ta có một file 
style sheet CSS ngoài có tên là ex1.css cho ví dụ này: 


h1 { font-family: arial; } 


Ví dụ 15-6 chỉ ra trang HTML sử le sheet ex1.css và ex2.css. 


VÍ DỤ 15-6 Thay đối style của phi qua mảng styleSheets. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Lập trinh với JavaScript«/title» 

«link rel="stylesheet" href="ex1.css" type="text/css" /» 
«link rel="stylesheet" href="ex2.css" type="text/css" /» 
«script type-z"text/javascript"» 


if (typeof document.styleSheets !- "undefined") { 
var stylerules; 
if (typeof document.styleSheets[0].rules !- "undef 
stylerules - document.styleSheets[0].rules 
) else { 


stylerules - document.styleSheets[0].cssRu 
} 
for (var 1 = 0; 1 < stylerules.length; 1++) { 
if (stylerules[i].selectorText.toLowerCase 
stylerules[i].style.fontFamily - " 


} 
} 
</script> 
</head> 
<body> 


«hi id="heading">JavaScript - Hướng dẫn hoc qua ví du</h1> 
«p id="tagline">"JavaScript - Hướng dán hoc qua ví du" là 
<p>Cuốn sách nhấn manh việc lập trinh JavaScript theo chuá 
</body> 
«/html» 


Khi được xem trên trinh duyệt, trang web sé hiển thị một tieu đề với dinh dang 
font Courier. Dòng chữ này được thay đối nhờ đoạn mã JavaScript trong vòng 
lặp for như trong Ví dụ 15-6. Bạn có thể thấy kết quả ở Hình 15-5. 
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JavaScript - Hướng dán học qua ví du 


"JavaScript - Hưng dàn hoc qua ví dv" là môt cuon sách duoc viét bòi Steve Suehring, do 
Microsoft Press vuàt bàn, 


Cuón sách thún manh vig lp i JavaScript theo chán dë à JavaScript có thë thye thi trén thiết nin 
tàng. trên nhiêu trinh duyệt khác nhau, 


HINH 15-5 Sử dung mảng `styleSheets` để truy cập bộ chọn. 
Bài tập 
1. Tạo một tài liệu HTML đơn giản sử dụng một style sheet ngay trong tài liệu 
đó hoặc thông qua một file ngoài. Trang đó phải có ít nhất hai phần tử <p> 
và một phần tử <h1>. Đặt thuộc tính ID cho mỗi phần tử. 


2. Dùng JavaScript để thay đổi style của một phần tử <p>, đổi thuộc tính 
color sang màu xanh dương. 


3. Dùng JavaScript để thay đổi style của tất cá phần tử «p», thay đổi thuộc tính 
hiển thi để ẩn chúng (Xem lại Bảng 15-1 để tìm hiểu về thuộc tính hiển thị). 


4. Dùng JavaScript để truy xuất style hiện tại cho thuộc tính hiển thị của phần 
tử <p> và hiển thị giá trị thuộc tính hiển thị hiện tại bằng hộp thoại thông báo 
alert(). 


Chuong 16 
Xử lý lỗi trong JavaScript 


Sau khi đọc xong chương này, bạn có thể: 
4 Nắm được các phương thức xử lý lỗi trong JavaScript: try/catch và 
onerror. 
» Xử lý lỗi với câu lệnh try/catch. 
» Sử dụng câu lệnh try/catch/finally. 
= Xử lý sự kiện onerror của đối tượng window và image. 


Giới thiệu hai xử lý lỗi 


Chương này giới thiệu hai cách chín ý lỗi trong JavaScript: try/catch 
và onerror. Các ngôn ngữ khác nhu Microsoft Visual Basic .NET và Microsoft 
Visual C# cũng sử dung try/catch để bắt và xử lý lỗi. Sự kiện onerror cho 
phép bạn thực thi một action khi gặp lỗi. 


Sử dụng try/catch 


Phần try trong nhóm câu lệnh try/catch bao quanh một khối mã JavaScript. 
Khi đoạn script thực thi, bất kỳ ngoai lệ nào xuất hiện trong khối lệnh try đều 
được bát lại bởi câu lệnh catch. Tiếp đó, ban xử lý lỗi này bằng đoạn mã 
JavaScript trong khói catch. Cú pháp của try/catch như sau: 


try { 
// Thuc thi doan má 


catch(errorObject) ( 


// Viết mã để xử lý lỗi ở đây 
à 
Khi má trong ménh dé £ry thuc thi, bát ky lói nào ành 
hưởng đến quá trinh sé ngay lập tức được mệnh dé catch xử lý. Hãy xem Ví du 
16-1 (Ví dụ này có trong file listing16-1.txt, phần Tài nguyên đi kèm): 


VÍ DỤ 16-1 Ví dụ try/catch đơn giản. 


try { 
var numField = document.forms[0]["num"]; 


if (isNaN(numField.value)) { 
throw "Không phải số"; 
} 


catch(errorObject) { 
alert(errorObject); 
} 


Khi giá trị của numField.value 
ngoai lệ do lập trinh viên viết sẵn, ( 
đề catch sau đó thực thi và trong t này nó trả về hộp thoai a1er t ( ). 
Chú ý sự khác nhau giữa ngoại lệ vié p trình viên (throw) và ngoại lệ 
được tạo bởi bộ thông dịch JavaScript tại thời điểm chạy, ví dụ như lỗi cú pháp. 
Khối lệnh try⁄catch không bắt lỗi cú pháp, do vậy chúng ta không thể dùng 
nó để xử lý những lỗi này. 


ái là số, câu lệnh throw đưa ra một 
hông báo “Không phải số”. Mệnh 


Khi sử dụng mệnh đề catch, ta có thể thuc thi nhiều công việc một lúc, ví dụ 
như gọi đến hàm khác để ghi lại lỗi hay xử lý tình trạng lỗi theo cách thức 
chung. Sử dung catch đặc biệt có ích trong những đoạn mã phức tap hay trong 
những đoạn mã dễ gây lỗi (ví dụ các đoạn mã xử lý dữ liệu do người dùng nhập 
vào). 


Trong bài tập sau, bạn sẽ tạo một web form tương tự như form đã tạo trong 
Chương 15 “JavaScript và CSS”. Lần này, ngoài phản hồi trực quan trong trường 
văn bản, chúng ta cung cấp thêm phản hồi bằng chữ. 


Sử dụng try/catch với web form 


1. Sử dung Microsoft Visial Studio, Eclipse hoặc trinh soạn thảo khác sửa file 
number.htm trong thư muc mã nguồn mẫu của Chương 16, Tài nguyên di 
kém. 


2. Thay thế dòng chú thích TODO bằng đoạn mã bôi đậm dưới dày (Xem trong 
file number.txt của Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Try/Catch</title> 

«script type-z"text/javascript" data-src="ehandler. ]s"></s( 
«script type-"text/javascript" data-src-z"number.js"»«/scr: 
</head> 

<body> 

«form name-z"formexample" id-z"formexample" action="#"> 
«div id="citydiv">Nhập một số trong khoáng từ 1 đến 100: 
«input id-'"num" name-z"num"» «span id-'feedback"» </span><; 
<d1v><input id-'submit" 'submit"»«/div» 

</form> 

<script type="text/java 
var formEl = document. gẽ 
EHandler .add(formEl,” submi 
</script> 

</body> 

</html> 


sByTagName("form")[0]; 
; function(eventObj) { checkV: 


3. Tạo file JavaScript có tên là number.js (File này có trong Tài nguyên đi 
kém). 


4. Chuyển đổi cách xử lý lỗi ở Chương 15 sang cách sử dung try/catch. Câu 
lệnh try/catch không thuc sự cần thiết cho ví dụ Chương 15, đây chi là 
minh hoa cho cách dùng try/catch. Điền đoạn mã sau vào file number.js 
(mặc dù có thể kết hợp nhiều đoạn mã vào trong một câu lệnh if, tác giả vẫn 
chia ra nhiều câu vì chúng ta sẽ mở rộng những đoạn mã này ở bài tập sau). 


function checkValid(eventObj) { 
try { 
var numField = document.forms[0]["num"]; 
if (isNaN(numField.value)) ( 
throw numField; 


} 
else if (numField.value > 100) { 
throw numField; 


else if (numField.value « 1) ( 
throw numField; 
I 


return true; 
} 
catch(errorObject) { 
errorObject.style.background = "#FF0000"; 
if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else ( 
window.event.returnValue - false; 
return false; 
} 
J 


5. Düng trinh duyét mó trang vedi. sau sé mở ra: 


|e http://localhost/ex: O ~ > x || (& Try/Catch | | tu Lf 


Nhập một sô trong khoảng từ 1 dén 100: 


6. Kiểm tra chức năng của mệnh đề try/catch. Nhập một số lớn hơn 100 vào 
ô trống (ví dụ 350) rồi nhấn Submit Query. Bạn sẽ thấy trang web như sau: 


=- o 
6 @ http://localhost/ex p~ >X | & Try/Catch | | | 


Nhập một số trong khoảng từ 1 đến 100: EE 


. Nhập vào một cum từ, nhấn Submit Query. Trường văn bán trong form vẫn 
có màu đỏ. 


. Nhập vào một số nhỏ hon 1, ví du như -2 rồi chon Submit Query. Trường 
văn bản vẫn có màu đỏ. 


. Điền vào số 50 rồi chọn Submi 
công, trả về form với trường vãi 


n này, form được gửi đi thành 


. Sửa file number.js để thêm vào phản hồi bằng chữ. File hoàn chinh sẽ giống 
như sau: 


function checkValid(eventObj) { 
try { 
var numField = document.forms[0]["num"]; 
if (isNaN(numField.value)) ( 
var err - new Array("Khóng phái lé 
throw err; 


} 

else if (numField.value > 100) { 
var err = new Array("Số này lớn hc 
throw err; 


else if (numField.value < 1) { 
var err = new Array("Số này nhỏ hc 
throw err; 


return true; 
} 
catch(errorObject) { 
var errorText = document.createTextNode(ei 
var feedback = document.getElementById("f« 
var newspan - document.createElement("spar 
newspan.appendChild(errorText); 
newspan.style.color = "#FF0000"; 
newspan.style.fontWeight = "bold"; 
newspan.setAttribute("id","feedback"); 
var parent = feedback.parentNode; 
var newChild = parent.replaceChild(newspar 
errorObject[1].style.background = ”#FF000( 
if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else ( 
window.event.returnValue - false; 
J 


return false; 


j 


L1. Mở lại trang web để thuc thi p 
nào so với phiên bản trước. 


ipt mới. Ban chưa thấy sự thay đổi 


.2. Nhập 350 vào ô văn bản và nhấn Submit Query. Bây giờ bạn nhận được 
trang như sau với phản hồi trả về cạnh ô văn bản: 


ESI 


e] e http://localhost/examplt Ðx>x | 2 Try/Catch , 7 d 
Nhập một só trong khoảng từ 1 đến 100: MAM Só này lớn hon 100 


Submit Query 


.3. Nhập -1 vào 6 văn bản và nhấn Submit Query. Bạn sẽ thấy trang sau: 


baba 


| & ) http://localhost/examp O ~ > X || Æ Try/Catch 


Nhập một số trong khoảng từ 1 đến 100: M Só này nhỏ hon 1 


Submit Query 


.4. Nhập vào một cum từ và nhấn Submit Query. Ban sẽ thấy trong hiển thị nhu 
Sau: 


bola 


6 e http://localhost/example © ~ > X ( Try/Catch | | 
Nhập một số trong khoảng từ 1 đến 100: EE Không phải là môt só 


.5. Nhập vào một số từ 1 đến 100 (ví dụ 50) rồi gửi form di. Form được gửi 
thành công và không có lỗi xảy ra. 


Ví dụ này sử dụng một số phương thức đã được giải thích ở các chương trước để 
tạo phần tử mới và thêm vào trang web nhằm mục đích phản hồi. Phần đầu của 
ví du được lẫy từ web form trong Chương 15 để sử dụng try/catch và nội 
dung mới. Khác biệt là ở chỗ form trong Chương 15 yêu cầu người dùng điền 
vào tên một thành phố trong khi form này yêu cầu nhập một số thuộc phạm vi 
xác định; bằng cách này, chúng ta có thế biểu diễn nhiều điều kiện phản hồi. 


Từng điều kiện ném ra một lỗi với đối tượng numField là đối tượng lỗi. Trong 
câu lệnh catch, màu nền của error0b7ect chuyển sang đỏ và hàm trả về giá trị 
fa1se nhằm thông báo form không hợp lệ. Đoạn mã thêm vào dùng một mảng 
để kết hợp cả lỗi viết bằng chữ và đối tượng form (numFie1d). Đối tượng 


array được dua vào câu lệnh catch. Chỉ số đầu tiên (6) là đoạn văn bản hiển 
thị lỗi, chỉ số thứ hai (1) là đối tượng numField được biểu diễn nhu sau (hãy 
chú ý đến phần mã in đậm): 


try 1 
var numField = document.forms[0]["num"]; 
if (isNaN(numField.value)) ( 
var err = new Array("Khóng phải là sÓ",numFi: 
throw err; 
} 
else if (numField.value > 100) { 
var err = new Array("Lón hơn 100",numField); 
throw err; 
else if (numField.value « 1) ( 
var err = new Array(“Nhỏ hon 1",numField); 
throw err; 
} 
else { 
return tru 
} 
} 


Trong ví du này câu lệnh catch thực Ot số nhiệm vụ. Đầu tiên, nó lấy về 
phần tử <span> để cung cấp phản hồi cho người dùng: 


var feedback - document.getElementById("feedback"); 


Tiếp đến, nó tạo một nút văn bản mới thông qua đoạn văn bản báo lỗi của 
errorObject: 


var errorText - document.createTextNode(errorObject[0]); 


Sau đó, câu lệnh tao một phần tử span mới để đặt vào tài liệu sau đó. Phần tử 
span trong đoạn mã là newspan được gán thêm đoạn văn bản báo lỗi màu đỏ 
với phần chữ đậm. Phần tử span mới này được đặt ID là feedback giống như 
phần tử span đã có: 


var newspan = document.createElement("span”); 
newspan.appendChild(errorText); 
newspan.style.color = "#FF0000"; 
newspan.style.fontWeight = "bold"; 


newspan.setAttribute("id"," feedback"); 


Đoạn má truy xuất nút cha của đối tượng feedback, do đó nó có thể sử dung 
phương thức rep1aceCh11d( ) để thay thế phần tử span cũ bằng phần tử mới 
như sau: 


var parent - feedback.parentNode; 
var newChild - parent.replaceChild(newspan,feedback); 


Tiếp theo, đoạn mã đổi màu nén của trường nhập dữ liệu form thành màu đỏ: 
errorObject[1].style.background = "#FF0000"; 


Những dòng cuối của đoạn mã, nhu ban đã thấy ở các chương trước, ngăn các 
hành động mặc định của form để làm trình duyệt đứng tại trang mà không gửi 
form đi: 


if (eventObj.preventDefault) { 
eventObj.preventDefault(); 
) else ( 


window.event.returm false; 


return false; 


Mách nhỏ Sử dụng try/catch nhu ví dụ trên giúp trừu tượng hóa việc xử 
lý ngoại lệ trong JavaScript. Tuy nhiên, sử dụng try/catch không thể ngăn 
chặn hay hỗ trợ việc kiểm tra những lỗi cú pháp trong mã. 


Xử lý nhiều ngoại lệ 


Một số trình duyệt, trong đó có Firefox, cho phép người dùng có thể dễ dàng 
xử lý nhiều ngoại lệ. Ví dụ, xem đoạn mã dưới đây: 


if (isNaN(numField.value)) { 
throw "Không phái số"; 


else if (numField.value » 100) ( 
throw "Lón hon 100"; 


else if (numField.value « 1) ( 


throw "Nhó hon 1"; 


J 
Khối mã `catch` sé có dang nhu sau: 
catch(errorObject if errorObject == "Không phải số") { 


// Xử lý trường hợp không phải số 


catch(errorObject if errorObject == "Lớn hon 100") { 
// Xử ly trường hop > 100 


catch(errorObject if errorObject == "Nhỏ hơn 1") { 
// xử ly trường hop <1 
J 


catch(errorObject) ( 
// Xử lý các trường hop khác 
J 


Trong đoạn mã này, mỗi ngoai lệ được bát bởi những đoạn mã xử ly cho 
riêng từng trường hợp. Nếu không có ngoại lệ nào xảy ra, đoạn mã xử lý 
ngoại lệ chung tại phần cuối của khối lệnh catch sẽ được thực thi. Tuy 
nhiên, đáng tiếc là Windows Inter rer không hỗ trợ nên tính năng 
này, do đó bạn nên hạn chế sử dụ 


Khối finally 

Trong JavaScript, có một câu lệnh bổ trợ không bắt buộc, tên là finally, 
thường sử dụng cùng với try/catch. Câu lệnh finally chứa các đoạn mã sẽ 
được thuc thi bất kể đoạn mã trong câu lệnh try có thực thi thành công hay 
không hoặc câu lệnh catch có chay hay không. Thông thường, bạn nên sử dung 
khối lệnh finally để đảm bảo một đoạn mã (ví dụ, đoạn mã có nhiệm vu don 
dẹp) luồn được gọi. 

Ví dụ 16-2 (có trong file listing16-2.txt của phần Tài nguyên đi kèm) đưa ra hàm 
checkValid() nhu ban đã thấy trong những bài tập trước của chương, nhung 
có bổ sung câu lệnh finally: 


VÍ DU 16-2 Thêm câu lệnh finally vào hàm checkValid(). 


function checkValid(eventObj) { 


try { 
var numField = document.forms[0]["num"]; 
if (isNaN(numField.value)) { 
var err = new Array("Khóng phải là 
throw err; 


else if (numField.value > 100) { 
var err - new Array("Số này lớn ho 
throw err; 


else if (numField.value < 1) { 
var err = new Array("SóÓ này nhỏ ho 
throw err; 


} 


return true; 


catch(errorObject) { 

var errorText - document.createTextNode(er 
var feedback - document.getElementById("fe 
var newspan - document.createElement("span 
newspan.appendChild(errorText); 
newspan.style.color = "#FF0000"; 
newspan.style.fontWeight = "bold"; 
newspan.setAttribute("id","feedback"); 
var parent - feedback.parentNode; 
var newChild - parent.replaceChild(newspan 
errorObject[1].style.background = "#FF0000 
if (eventObj.preventDefault) { 

eventObj .preventDefault(); 
) else { 

window.event.returnValue - false; 


return false; 


} 
finally { 

alert("Sẽ luôn được gọi dù thao tác thành 
} 


Sử dụng sự kiện onerror 


Ban có thể thấy sự kiện onerror được sử dung trong chương trinh xử ly các sự 
kiện lỗi, nhưng lập trình viên thường ít khi sử dụng phương pháp này vì họ có 
thé xử lý lỗi theo những cách thức tiện lợi hơn. Sự kiện onerror có thể gắn với 
đối tượng window và image. 


Gắn onerror vào đối tượng window 


Dé sử dung sự kiện onerror, bạn cần gán chúng vào một hàm sẽ được goi bất 
cứ khi nào lỗi JavaScript xảy ra. Sự kiện oner ror khá hữu ích trong quá trinh 
phát triển, dù vậy, giờ đây với những công cụ như Firebug, lập trình viên dần bớt 
lệ thuộc vào nó hơn trước. 


Bạn có thể gán sự kiện onerror vào đối tượng window như sau: 
window.onerror = myErrorHandler; 


Biến myErrorHandler chỉ đến một hàm do người dùng dinh nghĩa để xử lý các 
lỗi. Trình thông dịch JavaScript tự độ gi đi ba đối số đến hàm xử lý lỗi: 


= Mô tả lỗi. 
» Địa chi URL mà lỗi xảy xa. 
= Dòng mã ở đó lỗi xảy ra. 


Khi hàm xử lý lỗi trả về giá tri true, JavaScript sẽ không xử lý lỗi đó; 
JavaScript sẽ hiếu rằng lỗi này đã được các hàm xử lý lỗi xử lý. 


Tiếp theo, hãy xem Ví dụ 16-3 (Xem file listing16-3.txt, phần Tài nguyên di 
kèm). Đây là ví dụ về JavaScript và hàm xử lý lỗi do người dùng tự định nghĩa. 


VÍ DU 16-3 Ví dụ vé onerror của đối tượng window. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/htm14/strict.dtd"» 

«html» 

«head» 

«title»onerror«/title» 

«/head» 

«body» 

«div 1d=”myd1v">H1</d1v> 


«script typez"text/javascript"» 

function init() { 
doSomething(); 

} 


function errorHandler() { 
alert(arguments[0] + " tai dòng " + arguments[2]); 
return true; 


window.onload = init; 
window.onerror = errorHandler; 
</scrlpt> 

</body> 

</html> 


Khi ban chay các doan må trong Ví du 16-3 trên trinh duyét, ban sé tháy hóp 
thoai alert() nhu Hinh 16-1. 


Message from webpage I 


A Object expected tai dòng 10 


HÌNH 16-1 Xử lý lỗi với sự kiện `onerror` của đối tượng ^window^ 


Ví du 16-3 có chứa một hàm chủ định không được dinh nghĩa bên trong hàm 
init() khi trang web được tải. Trình thông dich JavaScript ném ra lỗi khi nó 
tìm thấy một hàm không được định nghĩa và vi hàm errorHandler do người 
dùng định nghĩa được gán vào sự kiện onerror, nên hàm này được gọi. Hàm 
errorHandler hiển thị hộp thoại thông báo alert() và trả về giá tri true để 
ngăn xử lý lỗi. Hộp thoại alert( ) hiển thị chỉ số thứ nhất và thứ ba của mảng 
đối số (arguments[0] và arguments[2]). Mảng arguments chứa ba đối số 
được truyền vào hàm xử lý như đã được mô tả ở trên: Thông báo lỗi, địa chỉ và 
dòng mã xảy ra lỗi. 


Tránh xử lý sự kiện theo cách gây bất tiện cho người truy cập 


Ví dụ 16-3 xử lý lỗi theo cách hơi bất tiện: thông qua hộp thoại alert( ). 


Việc xử ly lỗi nên chay ngầm bất cứ khi nào có thé thay vi dua ra các hộp 
thoại thông báo. Nếu trang web có nhiều lỗi, việc sử dụng hộp thoại rất 
phiền phức cho người dùng vì họ phải nhấn từng thông báo để tắt chúng đi. 
Khi bạn đoán một lỗi có thể xảy ra, hãy cố gắng xử lý để đoạn mã vẫn hoạt 
động ở mức chấp nhận được - ví dụ, dùng một hàm thay thế hay hiển thị 
một thông báo lỗi thân thiện hơn với người dùng. 


Bỏ qua lôi 

Bạn có thế phớt lờ lỗi thay vì viết thêm mã để xử lý. Để làm được điều này, đơn 

giản chỉ cần trả về giá trị true trong hàm xử lý lỗi. Khi một hàm xử lý lỗi trả về 
giá trị true, trình duyệt hiểu rằng lỗi đã được xử lý. Do đó, có thể hiểu rằng bạn 
đã ngầm yêu cầu trình thông dịch bỏ qua lỗi. 


Xét đoạn mã trong Ví dụ 16-4. Ví dụ này khá giống Ví dụ 16-3, tuy nhiên hàm 
errorHandler trả về giá trị true (như phần bôi đậm). Khi hàm không được 
định nghĩa doSomething() gây r được bỏ qua. 


Bạn có thể tìm thấy đoạn mã cho ong Tài nguyên đi kèm, file 


listing16-4.htm. 


VÍ DU 16-4 Đoạn mã bó qua lỗi. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<t1tle>onerror</title> 
</head> 
<body> 
«div 1d=”myd1v">H1</d1v> 
«script typez"text/javascript"» 
function init() { 
doSomething(); 
} 


function errorHandler() { 
return true; 
] 


window.onload - init; 
window.onerror - errorHandler; 
</scrlpt> 

</body> 

</html> 


Ban sẽ hiểu cách bó qua lỗi khi chay ví dụ trên Firefox có cài tiện tích Firebug. 
MG file này trên trinh duyệt, ban sé không thấy lỗi nào xảy ra. Sau đó, chuyển 
cầu lệnh return true trong hàm errorHand1er thành chú thích nhu sau: 


function errorHandler() { 
// return true; 


$ 
Khi bạn mở lai ví du, ban sé thấy có một lỗi trong cửa sô lỗi (error console) 
cüa Firebug nhu Hinh 16-2. 


D ttp://localhost/exa 


.) onerror 


r 


Hi 
9 'ÿ| < | -| Console ~ | HTML CSS Sơipt DOM Net p Qo, 
è| Clear Persist Profile | All| Errors Warnings Info Debug Info 


QD dosomething is not defined 
doSomething ( ) ; listing16-4.htm (line 10) 


HÌNH 16-2 Việc chuyển câu lệnh trả về giá trị của hàm xử lý thành chú thích sẽ gây ra lỗi nhu 
trong cửa sổ của Firebug. 


Găn onerror vào đối tượng image 

Bạn cũng có thể gắn sự kiện onerror vào các đối tượng image. Khi được đặt 
trong thẻ <img>, ban có thể sử dụng những hàm xử lý sự kiện để xử lý những 
hình ảnh không tìm thấy. Ví dụ, Hình 16-3 là một trang web bị lỗi thiếu ảnh. 


E) http://localhost/ex Ø ~ 9 X P CIT L | Ju mm 


Hi 


Hình 16-3 Lỗi thiếu file ảnh có thé tránh được bằng cách dùng JavaScript 


Bạn có thể tìm thấy đoạn mã cho Ví dụ 16-5 trong Tài nguyên đi kèm, file 
listing16-5.htm. 


VÍ DU 16-5 Mót trang web bi mát hinh. 


HTML 4.01//EN" 
.dtd”> 


<!DOCTYPE HTML PUBLIC "-// 
"http: //www.w3.org/TR/htm 
«html» 

«head» 
<title>onerror</title> 
</head> 

<body> 

«div 1d="mydiv">H1</d1v> 
«img data-src="”notfound. png”> 
</body> 

«/html» 


Bây giờ chúng ta sẽ xem xét đoạn mã với hàm xử ly onerror được chèn trong 
tài liệu. Hàm onerror chuyển hướng phần tử «img» đến một ánh có tồn tai. 
Trong trường hợp này, nội dung của ảnh không quan trọng, điều cốt yếu là sử 
dụng hàm onerror ở đây sẽ giúp chúng ta tránh gặp biểu tượng “Image Not 
Found" (Không tìm thấy ảnh) trên trang web của mình. Bạn có thé tìm thấy đoạn 
mã cho Ví dụ 16-6 trong Tài nguyên đi kèm, file listing16-6.htm. 


VÍ DỤ 16-6 Thêm hàm xử lý onerror ( ) cho hình ảnh. 


<!DOCTYPE HTML PUBLIC **"**-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 

<title>onerror</Ztitle> 

</head> 

<body> 

<div id="mydiv">Hi</div> 

<img data-src="notfound. png" **onerrorz"this.data-src-'logo. 
</body> 

</html> 


Khi bạn mở trang web trên trinh duyệt, trang này không tìm thấy hinh 
notfound.png, tuy nhiên trình duyệt lấy về và hiển thị file hình ảnh có tên 
logo.png như Hình 16-4. 


| ) & | http://localhost/ew A » > X rm | AXI 


Hi 


H 


HINH 16-4 File ảnh bi thiếu đã được thay thế nhờ vào hàm xử ly sự kiện `onerror`. 
Bài tập 
1. Sử dụng hàm xử lý onerror gắn với đối tượng window để xử lý lỗi xảy ra 
khi có một hàm không được định nghĩa. Chú ý bạn có thể dùng đoạn mã 
trong Ví dụ 16-3, nhưng hàm xử lý nên hiển thị lỗi thân thiện với người dùng 
hơn là sử dụng hộp thoai a1ert(). 


2. Tạo một web form và sử dung try/catch để bắt trường hợp tên thành phố 


điền vào không phải là “Stockholm”. Cung cấp phản hồi trực quan nếu tên 
thành phố không đúng. 


. Tạo một web form và sử dụng try/catch/finally để bắt lỗi trường hợp 
số điền vào lớn hơn 100. Luôn đưa ra lời cảm ơn người dùng mỗi khi họ 
nhập vào form (bất kể giá trị đúng hay sai). 


Phần 4 
AJAX và tích hop phía server 


Chương 17: JavaScript và XML 
Chương 18: Các ứng dung JavaScript 
Chuong 19: Sa lugc vé AJAX 
Chương 20: Tim hiểu thêm về AJAX 


Chương 17 
JavaScript và 


Sau khi đọc xong chương này, bạn có the: 


= Tim hiểu các hàm dùng để mở tài lieu XML bằng JavaScript. 
a Hiên thị dữ liệu XML dưới dạng bảng HTML. 
4 Xem tài liệu XML xuất ra từ Microsoft Office Excel 2007 bằng JavaScript. 


Sử dụng XML với JavaScript 


XML là một ngôn ngữ bao gồm hầu hết các thẻ được định nghĩa bởi người dùng. 
Đặc điểm này khiến XML trở thành ngôn ngữ có tính tùy biến cao và thường 
được sử dụng để trao đổi dữ liệu. Một điểm quan trọng mà các lập trình viên 
JavaScript nên lưu ý là XML chính là chữ X trong cụm từ viết tắt AJAX 
(Asynchronous JavaScript and XML). AJAX hiện nay đã trở thành một công cụ 
được sử dụng phổ biến trong việc tạo các ứng dụng web có tính tương tác cao 
với người dùng. Bạn sẽ hiểu thêm về AJAX trong hai chương tiếp theo: Chương 


19 “Sơ lược về AJAX” và Chương 20 “Tìm hiểu thêm vé AJAX”. 


XML là một chuẩn mở được định nghĩa bởi W3C và hiện dang ở phiên bản thứ 
tư. Phần này sẽ giới thiệu sơ lược về XML trong mối quan hệ với JavaScript. 
Bạn có thể tìm thêm thông tin về XML trên trang chủ của W3C 
(http://www.w3.org/XML/Core) hoặc trên trang web của Microsoft 
(http://(msdn.microsoft.com/xml/). 


^ z ^ ` "^ 
MOt ví du vé tài liéu XML 
Tài liệu XML chứa các phần tử được đặt trong một cấu trúc tài liệu. Các phần tử 
này có quy tắc cú pháp riêng, bao gồm quy tắc một phần tử cần phải có thẻ bắt 
đầu (hay thẻ mở) và thẻ kết thúc (hay thẻ đóng). Đối với những người lập trình 
web, đoạn văn bản đặt giữa hai thẻ có thể quen thuộc. Sau đây là một tài liệu 
XML ví dụ (ban có thể tìm thấy tài liệu này trong file books.xml trong thư muc 
mã nguồn mẫu Chương 17, trong Tài nguyên đi kèm): 


<books> 
<book> 


<title>MySQL Bible 
<author>Steve Sueh 
<1sbn>9789764549328 > 
«publisher»Wiley Publishing Inc.«/publisher» 
</book> 
<book> 


hor> 


<title>JavaScript - Hướng dẫn học qua ví dụ</title> 
<author>Steve Suehr1ng</Zauthor> 
«isbn»29780735624498«/isbn» 
<publ1sher>M1crosoft Press</publisher> 

</book> 

</books> 


Cấu trúc của một tài liệu XML cần thỏa mãn những tiêu chí nhất định để được 
công nhận là tài liệu đúng cú pháp (well-formed document). Nhu bạn đã thấy 
trong ví dụ trên, mỗi phần tử luôn có thẻ bắt đầu và thẻ kết thúc. Các phần tử 
cũng có thể lồng trong nhau. Có rất nhiều quy tắc giống các quy tắc của HTML. 


Tài liệu XML cũng có thể chứa các thuộc tính, ví dụ như sau: 


<?xml version=”1.0”2> g 
«book title="JavaScript - Hướng dán hoc qua ví du" authorz"S 


Tải một tài liệu XML băng JavaScript 
Bạn có thể tải và thao tác với các tài liệu XML bằng JavaScript. Phần này sẽ 
hướng dẫn bạn cách làm việc đó. 


Tải một tài liệu 


Có hai cách để tải một tài liệu XML tùy thuộc vào trình duyệt mà bạn muốn hỗ 
trợ. Đối với các trình duyệt mới, như Chrome, Firefox và các phiên bản IE mới, 
bạn có thể sử dụng đối tượng XMLHTTPRequest ( ), song với các phiên bản IE 
cũ, ban phải dùng đối tượng ActiveXObject. Đoạn mã tiếp theo tải file 
books.xml trên tất cả các loại trình duyệt: 


if (window.XMLHttpRequest) { 
var httpObj - new XMLHttpRequest(); 
) else ( 
var httpObj - new ActiveXObject("Microsoft.XMLHTTP") 


J 
httpObj.open( "GET", "books.x 
httpObj.send(); 

var xmlDocument - httpObj. Spons XML; 


Hiển thị tài liệu XML 


alse); 


Thông thường, chúng ta sử dụng định dạng bảng hoặc bảng tính để hiến thị dữ 
liệu XML. Hình 17-1 hiến thi file books.xml trong Excel 2007. 
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Ready 
HÌNH 17-1 File XML được hiển thị trên bảng tính. 


Dữ liệu trong Hình 17-1 có thể hiển thị trên trình duyệt thông qua một phần tử 

bảng HTML. Hiển thị dữ liệu XML sử dụng JavaScript đòi hỏi một số kiến thức 

về Mô hình đối tượng tài liệu (DOM) kết hợp với các hàm và phương thức để tải 

về tài liệu mà bạn đã học. 

Ví dụ tiếp theo tao ra hàm displayData( ) hiển thi thông tin dưới dạng bảng. 
Thuộc tính readyState 


Các phiên bản trước của cuốn sách này sử dụng thuộc tính readyState để 
xác dinh khi nào tài liệu XML được tải. Thuộc tính readyState là một số 


nguyên có năm giá trị tương ứng với trạng thái xử lý yêu cầu tải dữ liệu hiện 
tại. Bảng 17-1 liệt kê các giá trị này với chú giải tương ứng. 


BẢNG 17-1 Thuộc tính readyState** 


Giá trị Chú giải 


0 Chưa khởi tạo. Yêu cầu đã được mở nhưng chưa được gọi. 
1 Mở. Yêu cầu được khởi tạo, nhưng chưa được gửi. 

2 Gửi. Yêu cầu đã được gửi. 

3 Nhận. Đang nhận về phản hồi. 

4 Tải. Đã nhận xong phản hồi. 


Bạn sẽ học thêm về thuộc tính readyState và sự kiện 


onreadystatechange trong Chương 18 “Các ứng dụng JavaScript.” 


Việc hiển thi các nút và nút con bên trong một tài liệu XML đòi hỏi phải duyệt 
qua tất cả các cấp độ trong tài liệu và xây dựng tài liệu đầu ra. Hàm tiếp theo sẽ 
thực hiện công việc đó bằng cách duyệt qua cấu trúc của tài liệu XML và hiển 
thị dữ liệu trong đó dưới dạng bảng HTML. Đoạn mã này tiếp nối ví dụ tạo biến 
xmlDocument và nạp tài liệu XML (books.xml) vào biến xmlDocument ở trên. 


function displayData(xmlDocument) { 
var xmlEl - xmlDocu etElementsByTagName ( "book" ) 
var table - docume Element("table"); 
table.border - "1" 
var tbody - docume 
// Thém phàn thàn ch ng 
table.appendChild(tbody); 
// Tao các dóng mói 
for (i = 0; i < xmlEl.length; i++) { 
var row = document.createElement("tr"); 
// Tao các côt cho dòng/td 
for (j = 0; j < xmlEl[i].childNodes.length; 
// Bỏ qua nếu kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeType 
continue; 


Element("tbody"); 


} 

// Chèn dữ liệu từ tài liệu XML. 

var td = document.createElement("td" 
var xmlData - 
document.createTextNode(xmlEl[i].chi. 
td.appendChild(xmlData); 
row.appendChild(td); 


} 
tbody.appendChild(row); 


} 
document. getElementByTd( "xmI1data"” ).appendChild(table 


} 


Để đưa đoạn mã trên vào trang web, chúng ta cần gắn các hàm tải và hiển thị file 
XML vào một sự kiện. Ví du 17 -1 (có trong file listing17-1.html trong tài 
nguyên di kém) tao ra một hàm mới là getXML và gắn hàm này với sự kiện 
load của đối tượng window. Đoạn mã gắn sự kiện được in đậm. 


VÍ DỤ 17-1 Hiển thị dit liệu XML trong bảng HTML. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<t1tle>Books</t1tle> 
«script type-z"text/javascript" data-src="ehandler. Js"></sc 
</head> 
«body idz"mainBody"» 
«div id-"xmldata"»«/div» 
«script type-z"text/javascript"» 
function displayData(xmlDocument) ( 
var xmlEl = xmlDocument.getElementsByTagName ("book 
var table - document.createElement("table"); 
table.border - "1"; 
var tbody = document.createElement("tbody"); 
// Thêm phần thân cho bảng 
table.appendChild(tbody); 
// Tao dóng cho báng 
for (i = 0; 1 < xmIEl.length; i++) { 
var row = document.createElement("tr"); 
// Tao các cót cho dóng/td 
for (j = 0; j < xml1El[i].childNodes.length 
// Bỏ qua nếu kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeTyp 
continue; 


} 

// Chèn dữ liệu từ tài liệu XML. 

var td = document.createElement("td"); 

var xmlData - 
document.createTextNode(xmlEl[i].c 

td.appendChild(xmlData); 


row.appendChild(td); 


} 
tbody .appendChild(row); 


} 
document . getElementById("xmldata").appendChild(tab 


} 
function getXML() { 
if (window.XMLHttpRequest) { 
var httpObj = new XMLHttpRequest(); 


) else { 
var httpObj - new ActiveXObject("Microsoft 
} 


httpObj .open( "GET", "books. xm1", false); 
httpObj . send( ); 
var xmlDocument - httpObj.responseXML; 
displayData(xmlDocument ); 
} 
var mainBody = document.getElementById("mainBody"); 
EHandler.add(mainBody, "load", function() { getXML(); }); 


</scrlpt> 
</body> 
«/html» 
Khi xem trên trình duyệt, bảng dữ litong giống bảng tính thông thường nhu 


trong Hình 17-2. 


2 Books - Microsoft Internet Explorer 
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MySQL Bible Steve Suehring 9780764549328 Wiley Publishing Inc 


JavaScript - Hướng dán học qua ví dụ Steve Suehring 9780735624498 Microsoft Press 


Ë) Done | "ý My Computer 
HINH 17-2 Hiển thi tài liệu books.xml trong bảng HTML. 


Ví dụ 17-1 cho thấy một vòng lặp for được sử dung để duyệt qua cấu trúc XML 
và lần lượt tạo ra các dòng cho bảng. Chú ý là vòng lặp này chỉ tìm các nút 
Element bên trong tài liệu XML bằng đoạn mã sau: 


// Bỏ qua nếu kiểu khác 1 

if (xmlEl[i].childNodes[j].nodeType != 1) { 
continue; 

} 


Kiểu nút (nodeType) bằng 1 chứng tỏ đó là nút E1ement. Nếu kiểu của nút hiện 
tại không phải là ELement, đoạn mã sé chuyển đến phần tiếp theo trong tài liệu. 
Bạn có thể để ý thấy bảng dữ liệu trong Hình 17-2 không hề có tiêu đề cột. Để 
thêm tiêu đề, bạn chỉ cần thêm một đoạn mã. Phần tiếp theo sẽ hướng dẫn bạn 
cách thực hiện việc này. 


Thêm tiêu đề cột từ tài liệu XML 


1. Sử dụng Microsoft Visual Studio, E 
file books.htm trong thư mục 
kèm. (Lúc này, khi xem trên trì 
giống Hình 17-2). 


ipse hoặc một trình soạn thảo khác sửa 
âu Chương 17 trong Tài nguyên di 
ang books.htm sẽ vẫn hiến thị 


x 


2. Trong file books.htm, thêm đoạn mã in đậm dưới đây vào hàm 
displayData() (có thể tìm thấy đoạn mã này trong file books.txt) thay cho 
dòng chú thích TODO: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Books</Zt1tle> 

«script type-z"text/javascript" data-src="ehandler. Js"></s( 

</head> 

«body id-z"mainBody"» 

«div id-"xmldata"»«/div» 

«script type-"text/javascript'» 

function displayData(xmlDocument) { 
var xmlEl = xmlDocument.getElementsByTagName( "bool 
var table = document.createElement("table"); 
table.border - "1"; 


var tbody - document.createElement("tbody"); 
// Thêm phần thân cho bảng 
table.appendChild(**"**tbody**"**); 
var row - document.createElement("tr"); 
for (colHead = 0; colHead < xmlEl[0].childNodes.l: 
if (xmlEl[0].childNodes[colHead].nodeType 
continue; 


var tableHead = document.createElement("tl 
var colName - 
document.createTextNode(xmlEl[0].childNode 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


} 

// Chèn dòng vào bảng 

tbody.appendChild(row); 

// Tao dóng cho báng 

for (i = 0; i < xmlEl.length; i++) { 
var row = document.createElement("tr"); 
// Tao cá cho dóng/td 


for (j xmlEl[i].childNodes.lengtl 
a néu kiéu khác 1 
l[i].childNodes[j].nodeTyi 
continue; 
} 
// Chèn dữ liệu từ tài liệu XML. 
var td = document.createElement("t 
var xmlData = 
document.createTextNode(xmlEl[i].: 
td.appendChild(xmlData); 
row.appendChild(td); 
} 


tbody.appendChild(row); 
} 
document. getElementByTd( "xmL1data”).appendChild(tat 


} 
function getXML() { 


if (window.XMLHttpRequest) { 

var httpObj - new XMLHttpRequest(); 
) else ( 

var httpObj = new ActiveXObject("Microsoft 
} 


httpObj .open("GET", “books.xm1”, false); 
httpObj.send(); 
var xmlDocument - httpObj.responseXML; 
displayData(xmlDocument); 
} 
var mainBody = document.getElementById("mainBody"); 
EHandler.add(mainBody, "load", function() { getXML(); }); 
</script> 
</body> 
</html> 


3. Dùng trình duyệt mở trang web. Bạn sẽ nhận được kết quả nhu sau: 


3 Books - Microsoft Internet Explorer 
Fie Edt Wew Favorites Tools Heb Ld 


xì a Le #7 Search Je Favorites H -d iv a G đá 3 
http://localhost/Code/Chuong17/Books|html v E3Go 
title author isbn publisher 
MySQL Bible Steve Suehring 9780764549328 Wiley Publishing Inc. 


JavaScript - Huóng dán hoc qua ví du Steve Suehring 9780735624498 Microsoft Press 


Lo d 


Làm việc với dữ liệu XML xuất từ 


Excel 2007 


Excel 2007 hỗ trợ nhiều tính năng để làm việc với dữ liệu XML. Ban có thé 
nhập và xuất dữ liệu XML bằng Excel. Trên thực tế, Excel không thêm bất cứ 
thuộc tính độc quyền nào khi xuất dữ liệu ra tài liệu XML. Dưới đây là file 
books.xml được xuất ra từ Excel 2007 (file này có trong Tài nguyên đi kèm với 
tên là newbooks.xml): 


<?xml versionz"1.0" encoding-"UTF-8" standalone-z"yes"?» 
«books xmlns:xsi-'http://www.w3.0rg/2001/XMLSchema-instance": 


«book» 
<title>MySQL B1ble</title> 
<author>Steve Suehr1ng</Zauthor> 
«isbn»29780764549328«/isbn» 
«publisher»Wiley Publishing Tnc.</Zpubl1sher> 
</book> 
<book> 
<title>JavaScript - Hướng dẫn học qua ví dụ< 
<author>Steve Suehr1ng</Zauthor> 
«isbn»29780735624498«/isbn» 
«publisher»Microsoft Press</publisher> 
</book> 
</books> 


Nhờ mối liên hệ gần gũi giữa XML và Excel 2007, hàm displayData( ) ở trên 
có thể làm việc ngay với dữ liệu XML xuất ra từ Excel 2007 mà không phải thay 
đổi gì cả. Đối với các lập trình viên từng làm việc với các định dạng độc quyền 
trước đây, có thể nói đây là một điề ien đầy thú vi. 


Sơ lược về nh ôi dung tiếp 


theo 


Mặc dù XML là chữ X trong cụm từ viết tắt AJAX, song AJAX có nhiều nội 
dung thú vị hơn là JavaScript và XML. AJAX có thể làm việc với các kiểu dữ 
liệu khác ngoài XML. Trong Chương 19, bạn sẽ làm việc với AJAX dựa trên 
những kiến thức nền tảng được giới thiệu ngắn gọn trong chương này. Chương 
20 sẽ trình bày cách kết hợp JavaScript, AJAX và CSS để hiển thị dữ liệu truy 
xuất bằng JavaScript. 


Bài tập 


1. Sử dụng đoạn mã ví dụ trong chương để hiển thị bảng dữ liệu khi người dùng 
nhấn vào một liên kết thay vì khi trang web được tải lên. 


2. Sử dung đoạn má ví dụ trong chương để hiển thi bảng dữ liệu, kết hợp với 
DOM để đổi màu cho từng dòng trên bảng sao cho các dòng chán có màu 
xám. Gợi ý: Zaaabba là dạng biểu diễn thập lục phân của màu xám. 


Chuong 18 
Các ứng dung JavaScript 


Sau khi doc xong chương này, bạn có the: 


» Hiểu các thành phần có trong ứng dụng JavaScript. 


Thành phán của ứng dung 
JavaScript 


Dé xây dung một ứng dung trên nén 
nhận nhu sử dung ứng dung deskto 
dung này có tính năng và khả năng 
ứng dụng đang được thực thi trên mã 


giao diện phức tạp và dem lai cảm 
sử dụng JavaScript. Những ứng 
iu một ứng dụng desktop, như thé 
1c bộ thay vì chạy qua trình duyệt. 


Chương này sẽ cung cấp cho bạn cái nhìn tổng quan về các thành phần cấu thành 
một ứng dụng dựa trên JavaScript. Mục tiêu của chương là giúp bạn hiểu các 
kiến trúc bên dưới và mức độ phức tạp khi xây dựng ứng dụng ở cấp doanh 
nghiệp. 


Ba yếu tố chính: Hiển thị, Hành vi, Dữ 
liệu 
Có ba thành phần chính tôn tại trong một ứng dung web: 


= Hiến thị Giao diện của trang web. 


„ Hành vi Chức năng của giao diện ứng dụng, cu thể là những gi sẽ xảy ra khi 
người dùng nhãn chuột vào một thành phần của trang web hay tương tác 
với nó. 


Dữ liệu Thành phần phía server chứa dữ liệu và thuc thi các thao tác, kết quà 
=  trá về được biểu diễn trên trang web. 


Mã JavaScript chủ yếu xử lý hai thành phần đầu tiên — hiển thị và hành vi — để 
tác động đến giao diện hoặc phản hồi khi người dùng thực thi một hành động 
trên trang web. JavaScript cũng làm việc với những dữ liệu được server trả về, 
nhưng thường chỉ để thay đổi hình thức hiển thị theo cách nào đó. Ví dụ, một lời 
goi đến dich vụ web trả về nhiệt độ tại thời điểm hiện tại hoặc tinh hình thời tiết 
có thể dùng JavaScript để thay đổi biểu tượng thời tiết (ví dụ: thời tiết có nắng). 
Bây giờ, chúng ta sẽ đi vào chỉ tiết của từng thành phần. 


Hiên thị: Bố cục trang web 


Thành phần hiển thị của trang web bao gồm bố cục của trang và tất cả những gi 
liên quan đến giao diện của website hay trang web như màu sắc, hình ảnh, kiểu 
menu (bo tròn hay vuông... ), vị trí các nút bấm và nội dung, màu chữ và cách sử 
dụng hình ảnh. Như bạn đã thấy trong các chương về CSS và việc kiểm tra tính 
hợp lệ của form JavaScript có thể tác động tới toàn bộ các phần trên. Những 
thành phần này là yếu tố cơ bản tro ê web và được người dùng chú ý tới 
nhiều nhất. Vì vậy, bạn cần cân nh ø khi xác định yêu cầu cho 
website của mình. 


Hành vi: Kiểm soát hành vi và thời xảy ra hành vi 

Một trong những yếu tố quan trọng nhất quyết định trải nghiệm người dùng cũng 
chính là điều thường bị bỏ qua nhất khi thiết kế ứng dụng web: hành vi của giao 
diện ứng dụng, thành phần quyết định điều gì xảy ra khi người dùng tương tác 
với một thành phần nào đó. Xét hai trường hợp sau: 


= Khi người dùng nhấn nút Submit trên web form, nút Submit vẫn trong trạng 
thái kích hoạt hay đã bị vô hiệu? 

= Khi người dùng chuyển focus đến một trường văn bản, trường này có đổi 
màu hay được làm nổi lên không? 


Những hành vi dù nhỏ nhưng có thể cải thiện đáng kể trải nghiệm của người 
dùng nếu được thiết kế đúng cách. Tuy vậy, khi thiết kế website, người ta thường 
bỏ qua hay lược bớt để ưu tiên cho giao diện hiển thị hoặc thiết kế thô của trang 
web. 


Dữ liệu: Sử dụng, hien thị và kiểm tra tính hợp lệ 


JavaScript không tương tác trực tiep với cơ sở dữ liệu hay server, ít nhất là nội 
dung này sẽ không được đề cập trong phạm vi cuốn sách này. Rõ ràng, 
JavaScript có thể làm được điều này nhờ kỹ thuật AJAX và thông qua dịch vụ 
web, tuy nhiên các quá trình này đòi hỏi đoạn mã phía server phải trả dữ liệu về 
cho đoạn mã JavaScript đã gọi. 


Giống như thành phần hiển thị của trang web, thành phần dữ liệu phía server 
cũng cần được quan tâm đáng kể khi thiết kế ứng dụng web. Bao trọn từ thiết kế 
cơ sở dữ liệu đến lập trình logic nghiệp vụ, phần công việc hạ tầng này cần sự 
chú ý đặc biệt. 


JavaScript và giao diện web 


Các lập trình viên sử dụng JavaScript để tạo các ứng dụng phía người dùng 
nhằm cung cấp những trải ngiệm chất lượng. Microsoft Bing Maps (tiền thân là 
Live Search Maps) là một ứng dụng web.dựa nhiều vào JavaScript. Hình 18-1 là 
ví dụ về Microsoft Bing Maps, bạn cập tại 
http://www.bing.com/maps/. 


TẾ Era Mapi Windows Intemet Eglorer BÓ 
G je [31  /2x Bing conr v| 4s | x | |E ang P” 
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Done a 
HINH 18-1 Giao dién Bing Maps si? dung JavaScript dé nàng cao tính tuong tác. 


Người dùng có thé kéo bán đồ ra các hướng y hệt nhu ho thao tác với một ứng 


dụng desktop. Bản đồ được ghép từ nhiều ô hình với độ phân giải khác nhau. 
Khi người dùng thực hiện thao tác kéo chuột trên bản đồ, trình duyệt gửi yêu cầu 
HTTP đến web server Virtual Earth để yêu cầu trả về những 6 hình mới, sau đó 
trình duyệt nhanh chóng hiển thị thêm những ô hình mới này. 


Công cụ tìm kiếm Bing cũng sử dụng gợi ý tìm kiếm tương tự như các công cụ 
tìm kiếm khác, chăng hạn Google. Khi bạn nhập từ khóa vào ô tìm kiếm của 
trang http://www.bing.com, trình duyệt ngay lập tức gửi yêu cầu HTTP đến 
server để tìm các từ khóa tương tự như Hình 18-2. 


microsoft javascript Im 
microsoft javascript 
microsoft javascript free download 
microsoft javascript debugger 
microsoft javascript updates 
microsoft javascript memory leak detector 
microsoft javascript library 
microsoft javascript minifier 
microsoft javascript errors 
Turn history off Manage history 


HÌNH 18-2 Khả năng gợi ý tim kiếm sử dung JavaScript để lấy về danh sách các từ khóa liên 
quan từ server. 


Tất cả các thành phần của công cụ tìm kiếm Bing đều sử dụng JavaScript. 
Không thể kể hết các ứng dụng web sử dụng JavaScript để cải tiến trải nghiệm 
người dùng bằng cách điều chỉnh thành phần hành vi của trang web. Phần còn lại 
của cuốn sách sẽ cùng bạn xây dựng những ứng dụng kiểu này. Chương 19 “Sơ 
lược vé AJAX" và Chương 20 *Tim hiểu thêm về AJAX" sẽ hướng dẫn ban 
cách tạo ra giao diện cung cấp chức năng tìm kiếm với gợi ý đơn giản bằng 
JavaScript. Hai chương này cũng giới thiệu về AJAX và đưa ra các ví dụ làm 
việc với dữ liệu để tạo ra ứng dụng. Chương 21 “Giới thiệu về các thư viện và 
Framework của JavaScript" và chương 22 “Giới thiệu về jQuery" sẽ giới thiệu 
các thư viện JavaScript, tập trung vào jQuery, cung cấp những kiến thức giúp 
bạn đơn giản hóa nhiều công việc khi tạo các ứng dụng chứa mã JavaScript phức 
tạp. 


Chuong 19 
Sơ lược vé AJAX 


Sau khi đọc xong chương này, bạn có the: 
» Hiểu những điểm cơ bán vé phương thức lập trình AJAX (Asynchronous 
JavaScript and XML). 
= Hiểu rõ những điểm khác biệt giữa lời goi AJAX đồng bộ và không đồng 
bộ. 
= Sử dụng AJAX để truy xuất dữ liệu. 


= Sử dung AJAX với các phương thức HTTP (Hypertext Transfer Protocol) 
khác nhau để truy xuất phản hồi từ server. 


Giới thiệu về 


AJAX mô tả phương thức lập trình kết hợp JavaScript và web server. Các lập 
trình viên sử dụng AJAX để tạo những ứng dụng web mang tính tương tác cao, 
ví dụ như Microsoft Virtual Earth. 


Nếu không sử dụng AJAX, ứng dụng có thể bắt người truy cập đợi trong khi thu 
thập phản hồi từ server. Ứng dụng AJAX gửi các yêu cầu từ trình duyệt web tới 
web server ở chế độ chạy ngầm (chế độ không đồng bộ) trong khi người truy cập 
tương tác với ứng dụng. Điều này làm cho ứng dụng đáp ứng người dùng tốt 
hơn. 


Trong ứng dụng AJAX, JavaScript xử lý các phản hồi và hiến thi dữ liệu tới 
người dùng. Khi kết hợp với CSS (Cascading Style Sheets) cùng với bố cục 
trang web hợp lý, ứng dụng AJAX cung cấp những tính năng sử dụng và sự linh 
động tuyệt vời mà chỉ ứng dụng web mới có thể có được. 


Mặc dù có thể có một số ứng dụng AJAX phức tạp, nhưng quá trình gửi yêu cầu 
và xử lý phản hồi của những ứng dụng đó không quá phức tạp. Chương này sẽ 


giüp bạn tìm hiểu cách gửi các yêu cầu và nhận phán hồi từ phía server bằng 
cách sử dụng một đối tượng cơ bản trong AJAX: XMLHttpRequest. 


Một khái niệm trọng tầm trong AJAX là gọi tới các ứng dụng phía server để 
nhận về dữ liệu. Trong chương này, bạn sẽ được cung cấp kiến thức tổng quan về 
cách tạo ra các ứng dụng phía server với ASP.NET và PHP (PHP là từ viết tắt 
của PHP Hypertext Preprocessor - Bộ tiền xử lý siêu văn bản). Nếu cần thêm sự 
hỗ trợ để tạo mã chương trình phía server trong ứng dụng AJAX, bạn có thể 
tham khảo một số nguồn. 


Nếu tạo ứng dụng phía server sử dụng công nghệ của Microsoft thì Microsoft 
Developer Network là một nguồn tham khảo tuyệt vời với rất nhiều tài liệu 
hướng dẫn và bài viết giới thiệu về AJAX (http://msdn.microsoft.com/en- 
us/magazine/cc163363.aspx). Microsoft Press cũng xuất bán một số cuốn sách 
xây dựng ứng dụng web rất hay. Một trong số đó là cuốn Microsoft ASP.NET 3.5 
Step By Step (Microsoft Press, 2008). Với các cuốn sách khác, bạn có thể xem 
thêm thông tin tai http://www.microsoft.com/mspress. 


Nếu ban dang phát triển các ứng dung 
(Linux, Apache, MySQL, Perl/PHE 
làm viéc trén nén táng này dó là ti bài hướng dẫn trên web. Cuốn 
sách Learning Perl (O'Reilly, not tài liệu tham khảo rất tốt để tìm 
hiểu những kiến thức cơ bản về ngôn ngữ lập trình Perl. 


server sử dụng công nghệ như LAMP 
ách đơn giản nhất để nhanh chóng 


Chú ý Nếu thích phong cách viết cuốn sách này, bạn có thể tham khảo cuốn 


Beginning Perl Web Development (Apress, 2005), tài liệu này tập 
trung vào việc sử dụng ngôn ngữ Perl để làm việc với các ứng dụng web. 


Trang web chính thức của PHP (http://www.php.net) là nguồn tài liệu rất tốt để 
tìm hiếu với PHP, còn với ngôn ngữ Python, hãy xem chỉ tiết tai website 
http:/www.python.org. 


Đối tượng XMLHttpRequest 


Đối tượng XMLHttpRequest là trung tâm để xây dựng ứng dụng AJAX. Mặc 
dù, việc triển khai JavaScript có nhiều khác biệt nhưng tổ chức ECMAScript 


cũng như tổ chức W3C (World Wide Web Consortium) đã tiến hành chuẩn hóa 
rất nhiều khía canh trong lập trinh JavaScript, ngoai trừ đối tượng 
XMLHttpRequest, đối tượng này chưa bao giờ được chuẩn hóa. Dù vậy, kể từ 
khi phiên bán Windows Internet Explorer 7 ra đời, đối tượng XMLHttpRequest 
đã được sử dụng thống nhất trên tất cả các trình duyệt chính. 


Microsoft hỗ trợ đối tượng XMLHt tpRequest lần đầu tiên trong phiên bản 
Microsoft Internet Explorer 5.0. Nếu người truy cập sử dụng trình duyệt phiên 
bản cũ hơn, ứng dụng sử dụng đối tượng XMLHttpRequest sẽ không hoạt động 
được. Trong các phiên bản Internet Explorer trước phiên bản 7, đối tượng 
XMLHttpRequest được khói tạo như một đối tượng ActiveXObject, trong khi 
các trình duyệt khác lại triển khai đối tượng XMLHttpRequest như một đối 
tượng JavaScript tích hợp sẵn trong trình duyệt. Điều này có nghĩa là nếu ứng 
dụng cần làm việc với các phiên bản Internet Explorer trước phiên bản 7, bạn 
phải khói tạo đối tượng XMLHttpRequest theo cách khác, giống như tôi sé trình 
bày trong phần sau của chương này. Phần tiếp theo “Khởi tạo đối tượng 
XMLHttpRequest” sẽ trình bày cách kiểm tra sự tồn tại của đối tượng 
XMLHttpRequest và cách khởi tạo ø này trong tất cả các phiên bản 
Internet Explorer. 


Khởi tạo đối tượng LHttpRequest 

Đối với Internet Explorer 7 hoặc các phiên bản mới hơn và các trình duyệt phổ 
biến có hỗ trợ đối tượng XMLHttpRequest, việc khởi tạo đối tượng 
XMLHttpRequest được thực hiện tương tự nhau: 


var req = new XMLHttpRequest(); 


Còn với các phiên bản Internet Explorer trước phiên bản 7, bạn sẽ phải khởi tao 
một đối tượng ActiveXObject thay thế. Tuy nhiên, cách thức khởi tạo đối 
tượng Act1veX0b7ect cũng khác nhau tùy theo phiên bản của thư viện 
XMLHTTP được cài đặt trên máy client. Do đó, ban cần viết thêm mã bổ trợ để 
khởi tạo đối tượng XMLHttpRequest trong các phiên bán Internet Explorer cũ. 


Đoạn mã trong Ví du 19-1 trinh bày hàm khởi tạo đối tượng XMLHttpRequest 
có thể sử dụng trên nhiều trình duyệt khác nhau. 


VÍ DỤ 19-1 Khởi tạo một đối tượng XMLHttpRequest trên nhiều trình duyệt 
khác nhau. 


function readyAJAX() { 


try { 
return new XMLHttpRequest ( ); 
} catch(e) { 
try { 
return new ActiveXObject ("Msxm12.X 
} catch(e) { 
try { 
return new ActiveXObject(" 
} catch(e) { 
return "Bạn cần phải sử dụ 
} 
} 
} 


} 


Hàm được định nghĩa trong Ví dụ 19-1 sử dụng nhiều tàng khối lệnh 
try/catch để khởi tạo một đối tượng XMLHttpRequest bất kể người truy cập 
sử dụng trình duyệt nào. Nếu lời goi bansđầu tới đối tượng XMLHttpRequest 
thất bại, điều đó có nghĩa là người ø sử dụng phiên bản trình duyệt 
Internet Explorer trước phiên bản ø hợp đó, lỗi sẽ được phát hiện 
và một trong các phương thức khởi tpRequest dựa trên đối tượng 
ActiveXObject sẽ chạy. Nếu không Có Phương thức nào khởi tạo thành công, 
nguyên nhân có thể do phiên bản trình duyệt quá cũ và không hỗ trợ đối tượng 
XMLHttpRequest. 


Bài viết *About Native XMLHTIP" trên MSDN mô tả lịch sử và khía canh bảo 
mật của đối tượng XMLHttpRequest trong Internet Explorer. Bạn có thể tham 
khảo bài viết này tai dia chỉ http://msdn2.microsoft.com/en- 
us/library/ms537505.aspx. 


Hàm readyAJAX() trong Ví dụ 19-1 được gọi tới nhu sau: 
var requestObj = readyAJAX(); 


Biến requestObj chứa đối tượng XMLHttpRequest trả về từ hàm 
readAjax( ), trong trường hợp hàm này không khởi tạo thành công đối tượng 
XMLHttpRequest, biến request0b7 sé chứa chuỗi “Bạn cần sử dụng một 
trình duyệt mới hơn”. 


> um A A 
Gui yêu cầu AJAX 
Với đối tượng XMLHttpRequest vừa được khởi tao, ban có thể sử dung để gửi 
yêu cầu tới web server và nhận về các phản hồi. Để gửi yêu cầu tới web server, 
ban phái sử dụng kết hợp hai phương thức open( ) và send( ) của đối tượng 
XMLHttpRequest. 


Có hai cách cơ bán để gửi yêu cầu AJAX: đồng bộ và không đồng bộ. Khi gửi 
yêu cầu đồng bộ, đoạn mã gửi yêu cầu sẽ đợi phản hồi từ phía server - quá trình 
này được gọi là quá trình chặn (blocking). Vì vậy, với yêu cầu đồng bộ, đoạn 
mã gửi yêu cầu sẽ chặn việc thực thi các mã JavaScript khác trong khi đợi phản 
hồi từ web server. Quá trình này bộc lộ những nhược điểm rõ ràng khi các yêu 
cầu hoặc phản hồi bị thất lạc trong quá trình truyền nhận hoặc đơn giản là bị 
chậm. Với yêu cầu không đồng bộ, dòng mã gửi yêu cầu không chặn các mã 
khác. Thay vào đó, nó sẽ kiểm tra trạng thái của yêu cầu để biết khi nào yêu cầu 
hoàn thành. Bạn sẽ tìm hiểu thêm về yêu cầu không đồng bộ trong phần sau của 
chương này còn trước tiên chúng ta sẽ làm việc với yêu cầu đồng bộ. 


Trước khi gửi một yêu cầu tới serve 

sử dụng để tạo yêu cầu, phương th này có 
(GET, POST, HEAD hoặc khác), dia € R Jniform Resource Locator) chứa 
dia chỉ của trang web mà ban sé goi tói và một giá tri Boolean true hoặc false 
cho biết bạn muốn gửi yêu cầu theo chế độ không đồng bộ hay đồng bộ. 


tạo ra nó. Phương thức open được 
a đối số: phương thức gửi yêu cầu 


Giả sử đối tượng XMLHttpRequest được truy xuất thành công thông qua hàm 
readyAJAX( ) và lưu vào biến requestObj, khi đó lời gọi không đồng bộ tới 
phương thức open sẽ như sau: 


var url = "http://www.braingia.org/getdata.php"; 
requestObj.open("GET", url, true); 


Tương tự, lời gọi đồng bộ sé nhu sau: 


var url - "http://www.braingia.org/getdata.php"; 
requestObj.open("GET", url, false); 


Quá trinh gửi yêu cầu thực su được thực hiện khi phương thức send được goi: 


requestObj.send(); 


Chú ý Nếu các tham số được gửi kèm với yêu cầu có chứa ky tu đặc biệt, ví 
dụ như ký tự trắng hoặc các ky tự đã được quy dinh trong URI RFC, trước 
tiên bạn phải thực hiện thoát những ký tự đó bằng cách sử dụng ký hiệu %. 
Kỹ thuật này được trình bày chỉ tiết trong REC 3986, bạn có thể tham khảo 
tại địa chỉ ftp:⁄⁄ftp. rfc-editor.org⁄in-notes⁄rfc3986. txt. 
Hoặc ban cũng có thể tham khảo tại `http://msdn2.microsoft.com/en- 
us/library/aa226544(sql.80). 


Làm thế nào trang web có thể làm việc chỉ với tối đa 500 từ 


Giao thức truyền siêu văn bán (HTTP) là một ngôn ngữ web. Hiện tại, 
HTTP được định nghĩa trong tài lieu RFC 2616 và HTTP mồ tả giao thức 
trao đối thông tin thông qua yêu cầu từ được gửi từ phía client và phản hồi 
từ phía server. 


Các yêu cầu từ phía client như trình duyệt chứa một tập cụ thể các header 
xác dinh phương thức truy xuất dữ-liệH dối tượng cần truy xuất và phiên 
bản giao thức được sử dụng. Cá § c chứa tên web server, ngón ngữ 


yêu cầu, tên của trình duyệt và c¿ liên quan khác mà client gửi 
kèm theo yêu cầu. 


Dưới đây là một yêu cầu HTTP phiên bản 1.1 cơ bản, yêu cầu này chỉ chứa 
phần header quan trọng nhất: 


GET / HTTP/1.1 
Host: www.braingia.org 


Yêu cầu trên xác dinh phương thức truy xuất tới tài liệu là phương thức GET, 
địa chỉ của tài liệu cần yêu cầu đặt tại thư mục / (gốc) và giao thức sử dụng 
là HTTP phiên bàn 1.1. Dòng thứ hai, thường được gọi là header của host, là 
chuỗi URL http://www. braingia. org. Header này thông báo cho web 
server biết website nào đang được yêu cầu. Một yêu cầu có thể sử dụng 
nhiều phương thức khác nhau nhu: GET, POST và HEAD. Client và server 
cũng trao đổi các cookie HTTP chứa trong header. Các cookie được gửi kèm 
theo yêu cầu và được nhận về trong phản hồi. 


Khi nhận được yêu cầu như trên, web server lưu trữ website 
http://www.braingia.org sẽ gửi các header phản hồi nhằm thông báo 


yêu cầu đã được xử lý. Trong trường hợp này, web server sé gửi trả các 
header phản hồi tương tự như sau: 


HTTP/1.1 200 OK 


Date: Sat, 12 Mar 2011 01:04:34 GMT 

Server: Apache/1.3.33 (Debian GNU/Linux) mod perl/1.29 PHH/ 
Transfer-Encoding: chunked 

Content-Type: text/html; charset-iso-8859-1 


Tài liệu được yêu cầu sé được gửi theo sau header. Header đầu tiên và cũng 
là header quan trọng nhất cho biết trạng thái phản hồi. Trong ví dụ này, mã 
của phản hói là 200, nghĩa là lời gọi không đồng bộ đã được xử lý thành 
công. Một số mã phản hồi thông dụng khác bao gồm: 404 (biểu thị rằng 
không tìm thấy tài liệu được yêu cầu), 302 (biểu thi sự chuyển hướng) và 
500 (biểu thị rằng có lỗi xảy ra phía server). 


Việc nắm kiến thức cơ bản về HTTP là rất quan trong để có thể hiểu cách 
tạo ra một yêu cầu AJAX và cách gỡ lỗi cho các yêu cầu khi có lỗi xảy ra. 
Bạn có thể tìm hiểu thêm về HTTP, ôm các mã phản hồi, trong tài liệu 
REC 2616 tại địa chỉ: 


ftp://ftp.rfc-editor.org/in-notes/rf 


Xử lý kết quà phản hồi cua AJAX 

Sẽ rất dễ dàng nếu làm việc với một yêu cầu đồng bộ vì toàn bộ mã JavaScritpt 
sẽ tạm ngừng thực thi cho đến khi có phản hồi. Biến requestObj cung cấp một 
phương thức hữu ích trong việc xử lý kết quả trả về bằng cách cung cấp luôn mã 
trạng thái và mô tả trạng thái gửi về từ server. Tuy vậy, bất kể là yêu cầu đồng bộ 
hay không đồng bộ, mã trạng thái cũng cần được kiểm soát để chắc chắn là toàn 
bộ quá trình đã diễn ra thành công (thông thường mã trạng thái có giá trị 200 nếu 
thành công). 


Thuộc tính responseText chứa toàn bộ văn bản trả về từ web server. 


Ví dụ, giả sử ứng dụng phía server thực hiện việc trả về tổng của hai số và lời 
goi yêu cầu tính tổng của 2 và 56 là: 


http://www.braingia.org/addtwo.php?numi-2&num2-56 


Toàn bộ mã của yêu cầu kiểu đồng bộ và xử lý kết quả phán hồi trả về từ server 
như sau: 


requestObj .open("GET","http://www.braingia.org/addtwo.php?nul 
requestObj.send(); 
if (requestObj.status -- 200) ( 
alert(requestObj.responseText); 
) else ( 
alert(requestObj.statusText); 
} 


Trong ví dụ này, request0b7 là biến được tạo bởi hàm readyAJAX( ) được 
xây dựng tại phần trước. Tâm điểm của đoạn mã mà phương thức open xử dụng 
lệnh GET để yêu cầu đến địa chỉ http://www.braingia.org/addtwo.php ? 
num1=2&num2=56, yêu cầu này được gửi theo kiểu đồng bộ (tham số tương 
ứng khi goi phương thức open là false). Sau đó, phương thức send được gọi để 
thực sự gửi toàn bộ các yêu cầu đến web server. 


Khi client nhận được phản hồi từ phía 
để kiểm tra trạng thái của dữ liệu trả 
đều suôn sẻ, hàm alert được gọi để 
responseText, đó chính là dữ lié 
status có giá tri khác 200, nội dung b 


eb server, nó sử dung thuộc tính status 
giá trị nhận được là 200, moi thứ 
bản lưu trong thuộc tích 

của web server cho client. Nếu 
atusText sẽ được hien thị. 


Việc xử lý các yêu cầu kiểu không đồng bộ hơi phức tạp hơn một chút. Khi gửi 
một yêu cầu loại này, các đoạn mã lệnh phía sau vẫn tiếp tục chạy. Do đó, sẽ rất 
khó xác định thời điểm mà phản hồi được nhận đầy đủ. Để kiểm soát được chính 
xác trạng thái của quá trình phản hồi từ server, chúng ta có thể sử dụng sự kiện 
onreadystatechange để kích hoạt đoạn mã kiểm tra sự thay đổi của thuộc 
tính readyState của sự kiện này để xác định việc này. Trong Chương 17 đã 
nhắc đến thuộc tính readyState với năm trang thái như bảng 19-1 dưới đây: 


BẢNG 19-1 Các giá trị của thuộc tính readyState. 


Giá trị Mô tả 


0 Chưa được khởi tạo. Đã mở nhưng chưa được gọi tới. 
1 Mở. Đã được khởi tạo nhưng chưa được gửi. 

2 Đã gửi. Yêu cầu đã được gửi. 

3 Đang nhận. Đang nhận phản hồi. 


4 Đã được tải. Đã nhận xong phản hồi. 


Trên thực tế, trạng thái duy nhất của thuộc tính readyState mà người lập trình 
JavaScript và AJAX quan tâm đó là 4 — Đã được tải (loaded). Việc thực hiện xử 
lý các phản hồi có giá trị readyState khác 4 sẽ có thể gây ra lỗi. 


Thông thường bạn sẽ sử dụng một hàm đồng bộ để xử lý sự kiện 
onreadystatechange đối với các lời gọi AJAX đồng bộ. Hàm này thực hiện 
kiểm tra thuộc tính readyState có bằng 4 hay không, sau đó kiểm tra để đảm 
bảo trạng thái phản hồi bằng 200, tức là yêu cầu thành công. Hàm này có dạng 
như sau: 


requestObj.onreadystatechange - function() { 
if (requestObj.readyState -- 4) ( 
if (requestObj.status -- 200) ( 
alert(requestObj.responseText); 
) else ( 
alert(requestObj.statusText); 
} 


} 


Trong bài tập tiếp theo, bạn sẽ tạo ợng XMLHttpRequest và gửi yêu 
cầu tới web server để truy xuất một cuốn sách dựa vào mã ISBN. Bạn cần một 
web server và đoạn mã (chương trình) phía server để in ra các phản hồi vì các 
yêu cầu được gửi qua đối tượng XMLHttpRequest tuân thủ chính sách cùng 
nguồn gốc (Same Origin Policy). 


Chính sách cùng nguồn gốc quy định rằng các yêu cầu chỉ được gửi tới server 
trong domain cung cấp đoạn mã đang gọi. Nói cách khác, nếu tôi đang xử lý 
đoạn mã trực tiếp từ web server tại địa chi http://www.braingia.org, đoạn mã của 
tôi chỉ có thể gọi tới máy chủ đó và nhận về một phản hồi. Nếu gọi tới URL trên 
một web server khác, chính sách cùng nguồn gốc sẽ ngăn không cho đoạn mã 
nhận phản hồi. 


Chú ý Có một số cách để loại bỏ tính năng bảo mật của chính sách cùng 
nguồn gốc đó là sử dung HTTP proxy hoặc viết các chương trình phía 


server để gửi yêu cầu đại diện cho chương trình gọi; tuy nhiên, cuốn sách 
này sẽ không đề cập tới những cách thức đó. 


Trong bài tập tiếp theo, đoạn mã hay chương trinh phía server cần trả về chuỗi 
“JavaScript - Hướng dẫn học qua ví dụ” khi nhận được yêu cầu GET 
với đối số là cặp tên/giá trị như sau: 


isbn-9780735624498 


Dưới đây là ví dụ về một chương trinh phía server cơ bản nhất được viết bằng 
ngôn ngữ VBScript và cài đặt trong một trang ASP: 


<% 

dim isbn 

isbn-zRequest.QueryString("isbn") 

If isbn<>"" Then 
If isbn-z'"9780735624498" Then 

Response.Write("JavaScript - Hướng dán hoc qi 

End If 

End If 
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Chuong trinh vói tính náng tuong tu iết bằng PHP sé có dang như sau: 


«?php 
$isbn - $ GET['isbn']; 
if (! $isbn) { 

print "Yêu cầu không hop lệ. "; 
) else if ($isbn == "9780735624498") { 

print "JavaScript - Huóng dán hoc qua ví du"; 
J 


2> 

Trong bài tập tiếp theo, URL mà yêu cầu sẽ được gửi tới đã được định nghĩa sẵn; 
tuy nhiên, bạn phải thay thế URL đó bằng URL chứa đường dẫn tới chương trình 
phía server của bạn. Vì chính sách cùng nguồn gốc nên chương trình phía server 
phải nằm trong cùng domain với trang web gọi tới nó. 


Gửi yêu cầu và nhận phản hồi với XMLHttpRequest 


1. Tạo chương trình phía server để trả về tựa sách khi nhận được đối số 1sbn 
có giá trị như trong phần trước. Chương trình này có thể được viết bằng ngôn 
ngữ bất kỳ. (Nếu cần, bạn có thể tham khảo hai ví dụ trên). 


2. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác, 


chỉnh sửa lại file isbn.htm trong thư muc mã nguồn mẫu Chương 19 (phần 


Tài nguyên đi kèm). 


. Trong trang này, thay thế dòng chú thích TODO bằng đoạn mã in đậm sau 
đây (Xem trong file isbn.txt, phần Tài nguyên đi kèm). Hãy nhớ thay thế 
biến ur 1 bằng đường dẫn URL tương ứng tới chương trinh phía server của 


bạn: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 

<t1tle>TSBN</t1tle> 

</head> 

<body> 

«div 1d="data"></d1v> 

«script type-"text/javascript'» 
function readyAJAX() ( 

try { 

return 

e) { 

try { 

return 


J ch(e) { 
try { 
return 

} catch(e) { 
return 

} 


} 
} 


var requestObj = readyAJAX(); 


new XMLHttpRequest 


new ActiveXObject(' 


new ActiveXObject(' 


"Ban cân dùng mót 1 


var url = "http://www.braingia.org/isbn.php?isbn-97807356: 


requestObj.open("GET",url,true); 
requestObj.send(); 


requestObj.onreadystatechange - function() { 
if (requestObj.readyState -- 4) ( 
if (requestObj.status -- 200) ( 
alert(requestObj.responseText); 


) else ( 


alert(requestObj.statusText);** 


J 
} 
</script> 
</body> 
</html> 


4. Luu lai, sau dó dùng trinh duyét dé mó trang này. Ban sè nhân dugc mót 
thông báo nhu trong hình dưới đầy: 


Xin chúc mừng! Bạn đã hoàn thành xo ài tập làm việc với đối tượng 
XMLHttpRequest. 


Xu lý phản hồi XML 

Những ví dụ AJAX bạn đã thấy tới lúc này đều sử dụng các phản hồi định dạng 
HTML và văn bản thuần túy từ web server, do đó bạn có thể truy xuất tới những 
phản hồi đó thông qua phương thức responseText của đối tượng 
XMLHttpRequest. Tuy nhiên, ứng dung phía server có thể trả về phản hồi dinh 
dang XML, khi đó bạn phái sử dụng phương thức responseXML để xử lý những 
phản hồi này. 


Trong phần trước của chương, “Làm thế nào trang web có thể làm việc chỉ với 
tối đa 500 từ”, đã có một ví dụ về định dạng phản hôi từ web server. Phản hồi đó 
có chứa header Content - Type: 


Content-Type: text/html; charset-iso-8859-1 


Dé truy xuất phản hồi bằng phuong thức responseXML, web server cần gửi 
header Content-Type có giá trị là text/xml hoặc application/xml: 


Content-Type: application/xml. 


Khi đối tượng XMLHttpRequest nhận được phản hồi XML, bạn có thể sử dung 
các phương thức của DOM để xử lý phản hồi đó. 


Phương thức responseXML tương đối bất ổn định, phương thức này có thể dẫn 
tới kết quả không như mong đợi, tùy thuộc vào trình duyệt và hệ điều hành được 
sử dụng. Ngoài ra, phương thức responseXML không được hỗ trợ rộng rãi như 
các phương thức JavaScript khác. Sử dung phương thức responseXML có nghĩa 
là ban phải kết hợp kỹ thuật làm việc với XMLHttpRequest (đã được giới thiệu 
ở phần đầu chương) với kỹ thuật phân tách XML được giới thiệu trong Chương 
17. Ví dụ, hãy cùng xét file XML sau đầy (xem file book.xml): 


<?xml versionz"1.0" encodIng=”TS0-8859-1"”2> 

«book» 
<title>JavaScript - Hướng dán học qua ví dụ</title> 
<1sbn>9789735624498</1sbn> 

</book> 


Kết hợp đối tượng XMLHttpReque 
mã dưới đầy, đoạn mã này truy xuấ 


thuật phân tách XML dẫn tới đoạn 
i giá trị ISBN trong file book.xml: 


var requestObj - readyAJAX 
var url = "http://www.braingia-.org/book.xml"; 
requestObj.open("GET",url, false); 
requestObj.send(); 
if (requestObj.status -- 200) ( 
var xmldocument - requestObj.responseXML; 
alert(xmldocument.getElementsByTagName("isbn")[0].ch 
) else ( 
alert(requestObj.statusText); 
J 


Khi yêu cầu hoàn tất, phương thức requestObj . responseXML sẽ chứa file 
XML được yêu cầu (book.xml). Dòng mã 
xmldocument.getElementsByTagName("isbn") truy xuất một mảng trong 
thẻ <1sbn> của file book.xml. Chỉ có một thé duy nhất chứa giá trị isbn trong 
file; chỉ số [0] biểu thi thẻ đầu tiên. Phần . childNodes[0] của đoạn mã truy 
xuất nút con đầu tiên của thẻ <7sbn>. Trong trường hợp này, đó là nút văn bản 
chứa số hiệu mã ISBN. Cuối cùng, phần . nodeVa1ue của đoạn mã truy xuất tới 
giá trị của nút văn bản, sau đó hiển thi mã ISBN thông qua hộp thoai alert. 


Làm việc với JSON 

JavaScript Object Notation (JSON) là cách thức truyền dữ liệu theo dinh dang 
đối tượng và mảng thuần của JavaScript, thay vi mã hóa dữ liệu bên trong các 
phản hồi XML (hoặc HTML). JSON rất hiệu quả trong việc truyền dữ liệu từ 
server tới client. Việc phần tách XML sử dụng DOM khá phức tạp và chậm, 
trong khi đó việc phân tách dữ liệu theo định dạng JSON được thực hiện trực 
tiếp bằng JavaScript. 


Hãy nhớ lại file book.xml trong ví dụ ở phần trước. Dữ liệu của file này theo 
định dạng JSON sẽ được biếu diễn như sau: 


i 


"book": 


"title": "JavaScript - Hướng dẫn học qua ví dụ", 

"isbn": "9780735624498" 

} 
} 


Việc truy xuất tới một phần tử đơn 
trong dinh dang XML. Bạn có thể s 
phản hồi JSON. Ví dụ dưới đây là đoạ 


ih dạng JSON dé dàng hơn so với 
JavaScript eva1( ) để phân tách 
4 truy xuất và hiển thị tựa sách (title): 


var requestObj - readyAJAX(); 
var url - "http://www.braingia.org/json.php"; 
requestObj.open("GET",url,true); 
requestObj.send(); 
if (requestObj.status -- 200) ( 
var xmldocument = eval('(' + requestObj.responseText 
alert(xmldocument.book.title); 
) else ( 
alert(requestObj.statusText); 
J 


Việc sử dung dinh dang JSON có một nguy cơ mang tính có hữu vé báo mật, bởi 
ban cần sử dung hàm eval( ) để phân tách phản hồi từ server. Về bán chất, hàm 
eva1( ) thực thi đoạn mã JavaScript nhận được, vì vậy nếu đoạn mã JavaScript 
đó chứa mã độc, đoạn mã sẽ được chạy trong môi trường của ứng dụng hiện 
hành. Nhiệm vụ của bạn là đảm bảo dữ liệu mà ứng dụng sử dụng với định dạng 
JSON phải hoàn toàn vô hại và không chứa mã độc có thể gây ra các sự cố khi 


thực thi với hàm eval ( ). 


Sử dung framework JavaScript nhu jQuery có thé giảm được nguy cơ báo mát vi 
jQuery sử dung JSON theo chuẩn ECMA-262 phiên bản 5. Bạn sẽ tìm hiểu về 
jQuery và cách sử dụng jQuery để xử lý JSON trong Chương 22 “Giới thiệu về 
jQuery". 


Xử ly header 


Phuong thức HTTP HEAD chi trả về phản hồi chứa header thay vi cá header và 
nội dung như phương thức GET. Phương thức HEAD rất hữu dung khi xác định 
xem một nguồn tài nguyên có bị cập nhật hoặc thay đổi hay không. 


Một trong những header HTTP thường xuyên được gửi từ server đó là Expires 
(thời hạn), header này cho biết khi nào client nên yêu cầu bản sao mới của tài 
liệu thay vi đọc tài liệu đó từ bộ nhớ đệm. Nếu server gửi header Expires, 
phương thức HEAD rất hiệu quả để xem và phân tách header Expires vì phương 
thức này chỉ truy xuất header thay vì hần thân (body) của tài liệu được 
yêu cầu. 


Để chỉ yêu cầu phản hồi chỉ chứa h rver dù sử dụng yêu cầu HEAD 
hoặc bất kỳ kiểu yêu cầu nào khác nhu GET hoặc POST, hãy sử dung phương 
thức getA.11ResponseHeaders( ) của đối tượng XMLHttpRequest như sau: 


requestObj.getAllResponseHeaders(); 


Ví dụ 19-2 trinh bày cách thức truy xuất header trong phản hồi từ trang chủ 
website của tồi. 


VÍ DỤ 19-2 Truy xuất các header. 


<!DOCTYPE HTML PUBLIC "”"-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Header phản hồi</title> 

</head> 

<body> 

<div id="data"></div> 


«script typez"text/javascript"» 
function readyAJAX() { 


try ( 
return new XMLHttpRequest ( ); 
} catch(e) { 
try { 
return new Act1veXObJect( "Msxm12.X 
} catch(e) { 
try { 
return new ActiveXObject(" 
} catch(e) { 
return "Bạn cần sử dụng mộ 
} 
} 
} 
} 
var requestObj = readyAJAX(); 
var url = "http://ww.braingia.org/"; 


requestObj .open("HEAD",url,true); 
requestObj . send( ); 
requestObj.onreadystatechange = function() { 
if (requestObj.readyState == 4) { 
if (requestObj.status == 200) { 
alert(requestObj .getAllResponseHea 


) else { 
alert(requestObj.statusText); 
} 
} 
} 
</script> 
</body> 
</html> 


Trợ giúp Chính sách cùng nguồn gốc mà ban đã làm quen ở phần trước 
cũng được áp dụng tương tự cho phương thức HEAD trong Ví dụ 19-2. Khi 
viết Ví dụ 19-2, ban đầu tôi đã quên mất chính sách này và thiết lập biến 
url bằng http://www.microsoft.com/. Khi đó, tôi nghĩ rằng tôi có thể 
truy xuất đến trang chủ của website đó. Tuy nhiên, sau đó lỗi xảy ra, tôi đã 
tim ra nguyên nhân và thay đổi biến ur1 đúng bằng domain thực thi đoạn 
mã. Bạn cũng có thể gặp lỗi tương tự. Hãy nhớ thay đổi biến ur1 trong Ví 


du 19-2 sao cho đúng với server mà đoạn mã thực thi. 


Sử dụng phương thức POST 


Cho tới thời điểm này, các ví dụ mà bạn làm việc đều sử dụng phương thức GET 
và HEAD để truy xuất dữ liệu từ server. Khi gửi các yêu cầu thông qua giao thức 
HTTP, bạn thường sử dung phuong thức POST. Sử dụng phương thức POST với 
đối tượng XMLHttpRequest phức tạp hơn so với sử dung phương thức GET 
hoặc HEAD. Tuy nhiên, phương thức POST có hai ưu điểm mà phương thức GET 
không có. Đầu tiên, các tham số gửi qua yêu cầu POST được chứa trong phần 
thân của yêu cầu thay vì trong URL như phương thức GET, do đó những tham số 
đó khó có thể bị phát hiện qua quan sát thông thường. Thứ hai, phương thức 
POST hỗ trợ những yêu cầu có kích thước lớn. Một số server thường giới hạn 
kích thước của yêu cầu GET trong một số lượng ký tự nhất định và mặc dù những 
server đó cũng giới han kích thước của yêu cầu POST, giới hạn đó vẫn lớn hon 
nhiều so với yêu cầu GET. 


Phương thức HTTP POST đòi hỏi n 'ader bó sung trong yêu cầu. Việc thiết 
lập header được thực hiện thông q hức setEequestHeader ( ): 


requestObj.setRequestHeader(header, value); 


Ví du, để thiết lập header Content-Type cho một web form sử dung yêu cầu 
POST, bạn có thể viết như sau: 


requestObj.setRequestHeader("Content-type", "application/x-w 


Trong ví du trước, khi yêu cầu AJAX sử dung phuong thức GET, URL sé bao 
øồm các đối số hoặc cáp tén/giá tri truyền cho ứng dụng, giống như sau: 


http://www.braingia.org/books/javascriptsbs/isbn.php?isbn-97: 


Trong ví dụ trước, tham số isbn có giá trị bằng 9780735624498. Tuy nhiên khi 
sử dụng yêu cầu POST, URL chỉ chứa tên tài liệu hoặc nguồn được yêu cầu - 
URL không chứa bất kỳ tham số nào. Do đó bạn phải gửi những tham số này tới 
server thông qua phương thức send( ). 


Ví dụ 19-3 biểu diễn một yêu cầu AJAX sử dung phương thức POST, đoạn mã 
tương ứng được in đậm. Yêu cầu đó sử dụng hai tham số - bạn hãy thử tự xác 


định những tham số đó. 


VÍ DU 19-3 Tạo một yêu cầu POST. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>P0ST</title> 

</head> 

<body> 

«div id="xmldata"></div> 

<script type="text/javascript"> 

function readyAJAX() { 


try { 
return new XMLHttpRequest ( ); 
} catch(e) { 
try { 
return new Act1veXObJect( "Msxm12.X 
} catch(e) { 
try { 
return new ActiveXObject(" 
} catch(e) { 
return "Bạn cần sử dụng tr 
} 
} 
} 


} 
var requestObj = readyAJAX(); 
var url = “http: //www.bra1ng1a. org/books/Javascr1ptsbs/pos 
var params = “num1=2&num2=2”; 
requestObj .open("POST",url,true); 
requestObj . setRequestHeader ("Content -type", 
"application/x-www-form-urlencoded"); 
requestObj . send(params); 
requestObj.onreadystatechange = function() { 
if (requestObj.readyState == 4) { 
if (requestObj.status == 200) { 
alert(requestObj .responseText);** 
) else { 
alert(requestObj.statusText);** 
} 


J 
} 
</scrlpt> 
</body> 
«/html» 
Ví dụ 19-3 tao ra hai tham số và lưu vào biến params: 


var params = "numi-2&num2-2"; 


Sau khi tao ra đối tượng XMLHttpRequest (requestObj), các tham số được 
truyền vào dưới dạng đối số của phương thức send(): 


requestObj.send(params); 
Bài tập thực té: Tim kiếm và cập 
nhật thông tin trực tiếp 


Có rất nhiều ví dụ về việc sử dụng E để hỗ trợ gợi ý hay đoán từ khóa 
và tìm kiếm như ví dụ đã trình bày trc ong 18 “Các ứng dung JavaScript". 
Một ví dụ khác là tạo form tìm kiếm những địa chỉ email nằm trong danh sách 
đen hoặc danh sách trắng thông qua bộ lọc thư rác. 


Công cụ tìm kiếm danh sách đen/trắng sử dụng AJAX để nhập file XML và đưa 
ra kết quả dựa trên dữ liệu mà người quản trị web nhập vào. Bạn có thể dễ dàng 
chỉnh sửa ứng dụng này để cung cấp tính năng tìm kiếm hoặc đánh dấu trang 
trực tiếp. Chương 20 “Tìm hiểu thêm về AJAX” sử dụng một phần trong ứng 
dụng của Chương 18 để tạo form tìm kiếm trực tiếp (live search form - hiển thị 
kết quả tìm kiếm ngay khi người dùng nhập liệu lên ô tìm kiếm), còn phần tiếp 
theo sẽ giới thiệu một phiên bản của ứng dụng đó để tạo danh sách đánh dấu 
trang (bookmark) sử dụng XML và có khả năng tìm kiếm trực tiếp. 


Việc truy cập vào danh sách đánh dấu trang của trình duyệt web từ nhiều máy 
tính là một tính năng cần thiết. Với ý tưởng đó, ví dụ sau sẽ hướng dẫn bạn cách 
tạo ứng dụng AJAX cung cấp danh sách đánh dấu trang. Trang web này quản lý 
các trang được đánh dấu sử dung file XML năm ở vi trí trung tâm. Đoạn mã truy 
xuất file XML và tạo ra một trang web hiển thị danh sách trang đánh dấu đồng 
thời cung cấp giao diện tìm kiếm. 


Ứng dung danh sách đánh dấu trang có giao diện như trong Hinh 19-1. Trong 
hinh, ứng dung chỉ hiển thi ba trang được đánh dấu, nhưng cơ chế hoạt động của 
danh sách 3 hoặc 300 trang đánh dấu đều giống nhau. Ví dụ đơn giản này giúp 
trình bày vấn đề dé hiểu hơn. 


= — 
t ac >) 2 | http://localhost/exan O » 9 X E) hup/loahos/ean Ð + 3 X | & Ê Vi dụ về tìm kiếm | [ôi 


Tìm kiếm trang đánh d: 7 - 


Trane chủ cua Steve Suehrine 
MSDN 
Microsoft Press 


HINH 19-1 Ung dung tìm kiếm trang đán hói gian thuc. 


Ô tìm kiếm giúp lọc ra các trang đã A dấu ngay khi người dùng nhập từ 
khóa vào ô tìm kiếm. Ví dụ, nếu ngữ gð ký tự m vào 6 tìm kiếm, trang 
web sẽ thay đối sao cho chỉ những đánh dấu 1 trang bắt đầu bằng ký tự m được 
hiển thị, giống như trong Hình 19-2. 


| o D j 


\ =I ›)|Ð Ì http://localhost/exan A ~ 3 X E Ví dụ vè tim kiếm c| | EXIT 
Tìm kiêm trang đánh dâu: m 

MSDN 

Microsoft Press 


HINH 19-2 Nhập ký tự m giới han danh sách chỉ hiển thị các trang đánh dấu bắt đầu bằng ký 
tự m. 


Nếu nhập tiếp ký tu vào 6 tim kiếm, ví du nếu nhập thêm ký tu i để tao ra chữ 
mi, kết quả tiếp tục được lọc như trong Hình 19-3. 


a) Ej http://localhost/ean O ~ 9 X lỂviuvdumuin xi A + (o 
Tìm kiếm trang đánh dâu: m| — 
Microsoft Press 


HINH 19-3 Thêm các ky tự vào ô tìm kiếm để tiếp tục giới han các kết quả tìm kiếm. 


Khi người dùng xóa chữ trong text box, trang web sẽ trở lại trạng thái mặc định 
(như trong Hình 19-1). 


Dưới dày là mà XML của ứng dun; 
nguyén di kém): 


trong file bookmark.xml, phàn Tài 


<?xml version=”1.0” encoding-"UTF-8" standalone=”"yes”2> 
«bookmarks xmlns:xsi-z"http://www.w3.0rg/2001/XMLSchema-insta 


«bookmark? 
<title>Trang chủ của Steve S 
<ur1>http: //www.bra1ng1a.org. 
</bookmark> 
«bookmark»? 
<t1tle>MSDN</t1tle> 
<ur1>http: Z“Zmsdn.m1crosoft.c‹ 
</bookmark> 
«bookmark»? 
«title2Microsoft Press«c/titl 
«url-http://www.microsoft.coi 
</bookmark> 


«/bookmarks» 


Đoạn mã cho ứng dung cùng với trang web được trình bày ở đây và có trong file 
bookmark.htm (phần Tài nguyên đi kèm): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Ví du vé tim kiếm</title> 

</head> 

<body> 

«form name="nameform" 1d="nameform" actionz"" method=”post”> 

Tìm kiếm trang đánh dấu: «input id-"textname" type="text" na 

</form> 

<div id="data"></div> 

«script type="text/javascript" data-src="ehandler.js"></scri 

«script type="text/javascript"> 

function textSearch() { 
var textName = document.getElementById("textname"); 
var dataNode = document.getElementById("data"); 
while (dataNode.hasChildNodes()) ( 

dataNode.removeChild(dataNode.firstChild); 


listName(textName.v 


} 
function readyAJAX() { 
try { 
return new pRequest(); 
} catch(e) { 
try { 
return new ActiveXObject("Msxm12.XML 
} catch(e) ( 
try { 
return new ActiveXObject( "Mi: 
} catch(e) { 
return "Ban cần sử dung trinl 
} 
} 
} 


function listName(text) { 
var xmlEl = AJAXresponse.getElementsByTagName( "bookm; 
elLength - xmlEl.length; 
for (1 = 0; 1 < elLength; 1++) { 
var div = document.createElement("div"); 
// Tao các phàn tü cho mói dóng 


for (j = 0; j < xmlEl[i].childNodes.length; . 
// Bỏ qua phần tử có kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeType 
continue; 
} 


var url = new RegExp("http"); 
if (! xmlEl[i].childNodes[j].firstCh 
var pattern - "^" + text; 
var title - xmlEl[i].childNo 
var nameRegexp - new RegExp( 
var existDiv - document.getE. 
if (! existDiv) { 
if (title.match(name 
var anchor - 
var xmlData : 
document.cre: 


var urls =A 
anchor.setAt 
anchor.appen: 
div.appendcCh. 


} 
} 
J 
document.getElementById("data").appendChild( 
} 

} 
var requestObj = readyAJAX(); 
var url = "http://www.braingia.org/books/javascriptsbs/bookm; 


requestObj.open("GET",url,true); 
requestObj.send(); 
var AJAXresponse; 
requestObj.onreadystatechange - function() { 
if (requestObj.readyState -- 4) ( 
if (requestObj.status -- 200) ( 
AJAXresponse - requestObj.responseXM 
listName(""); 
) else ( 
alert(requestObj.statusText); 
J 


var textEl = document.getElementById("textname"); 
EHandler.add(textEl,"keyup", function() ( textSearch(); ) ); 
</script> 

</body> 

</html> 


Phần JavaScript của đoạn mã trên được chia thành một số hàm, tôi sé giải thích 
ngắn gọn từng hàm ngay sau đây. Đầu tiên, đoạn mã liên kết tới đoạn mã xử lý 
sự kiện ehandler.js, file này đã được tạo trong Chương 11 “Các sự kiện trong 
JavaScript và làm việc với trình duyệt”: 


«script type="text/Javascript"”" data-src=”"ehandler. Js”></scr 1| 


Mã HTML của trang web chỉ chiếm một số ít dòng. Dưới đây là mã HTML của 
web form: 


«form name="nameform" 1d="nameform" actionz"" method=”post”> 
</form> 


Và dưới đây là thé div chứa các tr 
«div 1d="data"></d1v> 


Phần Javascript của đoạn mã trên khai báo một số hàm và thực thi đoạn mã sau 
đây trong khối lệnh chính. Đoạn mã này tương tự đoạn mã mà bạn đã gặp trong 
suốt chương này: đoạn mã sử dụng hàm readyAJAX( ) và gửi một yêu cầu 
AJAX tới server để truy xuất file XML chứa danh sách các trang đã được đánh 
dấu. Khi nhận được phản hồi, đoạn mã gọi tới hàm 11stName ( ). 


Ngoài đoạn mã AJAX, một hàm xử lý sự kiện cũng được gắn cho text box trên 
web form. Sự kiện được xử lý là keyup, sự kiện này được kích hoạt khi một 
phím được nhãn và nhả trong text box. Đoạn mã này sẽ như sau: 


var requestObj - readyAJAX(); 
var url = "http://www.braingia.org/books/javascriptsbs/bookm; 
requestObj.open("GET",url,true); 
requestObj.send(); 
var AJAXresponse; 
requestObj.onreadystatechange = function() { 

if (requestObj.readyState -- 4) ( 

if (requestObj.status -- 200) ( 


AJAXresponse - requestObj.responseXM 
listName(""); 

) else ( 
alert(requestObj.statusText); 

J 


} 
} 
var textEl = document.getElementById("textname"); 
EHandler.add(textEl,"keyup", function() { textSearch(); ) ); 


Hàm xử ly sự kiện liên quan đến các thao tác phím trên form tìm kiếm năm trong 
hai hàm textSearch và 11stName. Hàm textSearch chịu trách nhiệm loại 
bỏ các đánh dấu trang khỏi danh sách và gọi tới hàm 1istName( ). 


function textSearch() { 
var textName = document.getElementById("textname"); 
var dataNode - document.getElementById("data"); 
while (dataNode.hasChildNodes()) ( 
dataNode.removeChild(dataNode.firstChild); 


listName(textName. 


j 


Cuối cùng, hàm 1istName( ) chứa doa hiển thị trang đánh dấu có ít nhất 
một phần trùng khớp với những ký tự được nhập vào ô tìm kiếm. Nếu ô tìm 
kiếm trống, hàm 1istName( ) sẽ hiển thị tất cá danh sách các trang đã được 
đánh dấu. 


function listName(text) { 
var xmlEl = AJAXresponse.getElementsByTagName( "bookm; 
elLength - xmlEl.length; 
for (1 = 0; 1 < elLength; 1++) { 
var div = document.createElement("div"); 
// ra các phàn tü cho mói dóng 
for (j = 0; j < xmlEl[i].childNodes.length; . 
// Bỏ qua các phần tử có kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeType 
continue; 
} 


var url = new RegExp("http"); 
if (! xmlEl[i].childNodes[j].firstCh 
var pattern - "^" + text; 


var title = xmlEl[i].childNo 

var nameRegexp - new RegExp( 

var existDiv - document.getE. 
if (! existDiv) { 

if (title.match(name 

var anchor - 

var xmlData : 

document.cre: 


var urls = A. 
anchor.setAt 
anchor.appen: 
div.appendcCh. 


} 
} 
document.getElementById("data").appendChild(: 


Bài táp 


1. Phương thức yêu cầu HTTP nào được đề cập trong chương này có tính bảo 
mật cao nhất? Vì sao? 


2. Hãy nêu sự khác nhau giữa yêu cầu/phản hồi XMLHttpRequest sử dung 
HTML, sử dụng XML và sử dụng JSON. 


3. Tao một chương trình phía server trả về tổng của hai số, hai số đó được 
client gửi tới chương trình dưới dạng tham số. Sau đó sử dụng đối tượng 
XMLHttpRequest và lời gọi không đồng bộ để gọi tới chương trình vừa tạo. 


Chuong 20 
Tim hiéu thém vé AJAX 


Sau khi đọc xong chương này, bạn có thể: 


= Nắm rõ cách kết hợp AJAX và CSS. 
» Hiểu thêm về quan hệ giữa DOM, AJAX và CSS. 


= Sử dung AJAX và CSS để tao và áp dụng style cho bảng HTML với dữ liệu 
XML. 


= Sử dung CSS tao ô thả xuống trên nền AJAX. 


Trong chương trước, ban đã biết cách sử dung đối tượng XMLHttpRequest để 
gửi, nhận, xử lý các yêu cầu và các ột ứng dụng AJAX. Trong chương 
này, bạn sẽ học cách sử dụng CSS Style Sheets) để hiển thi dữ liệu 

nhận về với AJAX. 


Mối quan hệ giữa JavaScript và CSS ợc đề cập trong Chương 15 
“JavaScript và CSS”. Trong Chương 15, bạn đã học cách thay đối style (định 
dạng trình bày) cho tài liệu bằng JavaScript. Chương 17 “JavaScript và XML” 
giới thiệu cách hiển thị dữ liệu XML dưới dạng bảng HTML và Chương 19 “Sơ 
lược về AJAX” giới thiệu cách sử dụng CSS và DOM để tạo một trang tìm kiếm 
các trang được đánh dấu (bookmark). Trong chương này, ban sé học cách sử 
dụng CSS để áp dụng style cho bảng tạo ra trong Chương 17 và mở rộng ứng 
dụng tìm kiếm trong Chương 19 với cả CSS và JavaScript. 


Qua chương này, tôi hy vọng có thể truyền tải một điều: sử dụng AJAX rất dễ 
dàng. Việc truy xuất và phân tích thông tin bằng đối tượng XMLHttpRequest 
cũng khá đơn giản, điều quan trọng là thao tác với dữ liệu. Đó là lý do tại sao 
CSS và DOM đóng vai trò quan trọng đến vậy. Có thể nói, AJAX là môi trường 
để bạn vận dụng tất cả các kiến thức về JavaScript học được trong cuốn sách này 
để tạo ra những ứng dụng lớn. 


Tao báng HTML vói XML và CSS 


Chương 17 đã trinh bày ví du doc dữ liệu từ file XML và sử dung dữ liệu đó để 
tạo bảng HTML như minh họa trong Hình 20-1. Đoạn mã để tạo bảng dữ liệu 
này được trình bày trong Chương 17 và được cải tiến để hiến thị không chỉ dữ 
liệu mà còn cả các tiêu đề cột. Kết quả của đoạn mã cuối Chương 17 được minh 
họa trong hình vẽ sau đây: 
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HÌNH 20-1 Hiên thi dữ liệu XML trong bảng HTML. 


Đoạn mã trong Chương 17 sử dung các phuong thức XML để lấy dữ liệu truc 
tiếp. Bài tập tiếp theo sẽ thay đổi đoạn mã đó để truy xuất file XML bằng cách 
sử dụng đối tượng XMLHttpRequest. Cũng giống nhu bài tập trong Chương 19, 
bài tập này yêu cầu file XML phải được lưu trên web server. 


Sử dung XMLHttpRequest để truy xuất và hien thi dữ liệu XML 


1. Dùng file books.xml trong thư muc mã nguồn mẫu Chương 17 hoặc tạo một 
file books.xml chứa đoạn mã sau đây (đoạn mã có trong file books.xml của 
Tài nguyên di kèm). Đặt file books.xml trên cùng web server với file HTML 
mà bạn sẽ tạo trong bước tiếp theo. 


<books> 
<book> 
<title>JavaScript - Hướng dán hoc qua ví du«/titl: 
«author»Steve Suehring«c/author» 
<1sbn>9786735624498</1sbn> 
<publ1sher>M1crosoft Press</publisher> 
</book> 
<book> 
<t1tle>MySQL B1ble</title> 
<author>Steve Suehr1ng</Zauthor> 
<1sbn>9786764549328</1sbn> 
«publisher»Wiley Publishing Tnc.</publ1sher> 
</book> 
</books> 


2. Sử dụng Microsoft Visual Stud 
sửa file ajaxbooks.htm trong th 
nguyén di kém. 


oác trinh soan tháo khác chinh 
1iguón mẫu Chương 20 của Tài 


3. Trong trang ajaxbooks.htm, thay thé dóng chü thích TODO báng doan má in 
đậm sau đây (đoạn mã có trong file ajaxbooks.txt của Tài nguyên di kém). 
Hãy nhớ thay thế dòng URL YOUR SERVER HERE bàng URL tương ứng với 
web server của bạn. Lưu ý ban chỉ thay đổi định nghĩa hàm và dòng đầu tiên 
của hàm displayData() so với mã gốc ở Chương 18. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Books</t1tle> 

</head> 

<body> 

«div id-"xmldata"»«/div» 

«script type-"text/javascript'» 

function readyAJAX() ( 


try { 
return new XMLHttpRequest(); 


} catch(e) { 


try { 
return new ActiveXObject('Msxml2.) 
} catch(e) { 
try { 
return new ActiveXObject(' 
} catch(e) { 
return "Bạn cần sử dụng mí 
} 
} 


} 
} 
var requestObj = readyAJAX();** 
var url = "http://YOUR SERVER HERE/books.xml"; 
requestObj.open("GET",url,true); 
requestObj.send(); 
var AJAXresponse; 
requestObj.onreadystatechange - function() { 

if (requestObj.readyState -- 4) ( 

if (reques j. status -- 200) ( 

ponse = request0b].responsc 
)ata( AJAXresponse); 


requestObj.statusText); 


J 
function displayData(response) ( 
var xmlEl = response.getElementsByTagName ("book"); 
var table - document.createElement("table"); 
table.border - "1"; 
var tbody - document.createElement("tbody"); 
// Thém phán body vào báng 
table.appendChild(tbody); 
var row - document.createElement("tr"); 
// Thém mót dóng vào báng 
tbody.appendChild(row); 
for (colHead = 0; colHead < xmlEl[0].childNodes.le 
if (xmlEl[0].childNodes[colHead].nodeType !- 1) ( 
continue; 
J 


var tableHead - document.createElement("tl 


var colName -document.createTextNode( 
xmlEl[0].childNodes[colHead].node! 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 
} 
tbody.appendChild(row); 
// Tao các dòng cho bång 
for (i = 0; i < xmlEl.length; i++) { 
var row = document.createElement("tr"); 
// Tao các ô cho mõi dóng/td 
for (j = 0; j < xmlEl[i].childNodes.lengtl 
// Bỏ qua phần tử có kiểu khác 1 
if (xm1El[i].ch11dNodes[ 7 ].nodeTyt 
continue; 


} 

// Thêm dữ liệu từ tài liệu XML 

var td = document.createElement( "t1 

var xmlData = document.createText! 
xmlEl[i].childNodes[j].fi! 

endChild(xmlData); 

ndChild(td); 


j 


tbody.a d(row); 


} 
document.getElementById("xmldata").appendChild(tal 


</script> 
</body> 
</html> 


4. Dùng trình duyệt để mở, ban sé thấy một trang nhu sau: 
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Bài tập này kết hợp đoạn mã từ hai bài tập trong Chương 18 và 19 để minh họa 
cách truy xuất, hiển thi dữ liệu XML bằng đối tượng xm1HttpRequest kết hợp 
với ứng dụng AJAX. Mặc dù ứng dụng XML ở Chương 18 đã được cải tiến để 
sử dụng đối tượng xm1HttpReque ảng kết quả hiển thị trông vẫn chưa 
thật đẹp. Đây là lúc vai trò của CS 


Sử dụng CSS để áp dụng style 
cho bảng 


Hàm chủ dao hiển thị bảng trong bài tập trước là displayData(). Trong hàm 
này, bạn có thể áp dụng các style CSS để bảng hiến thị đẹp hơn và giống bảng 
trong các ứng dụng web hiện đại hơn. 


Chú ý Cách làm việc với CSS trong chương này là thay đổi trực tiếp các 
thuộc tính định dạng trong JavaScript. Tuy nhiên, bạn cần hiểu rằng đây chỉ 
là phương pháp phục vụ mục đích giảng dạy; phương pháp này không được 
ưa dùng trong thực tế vì nó làm cho việc gỡ lỗi các thuộc tính định dạng trở 
nên khó khán do thông tin bi quy định trong cả mã CSS và mã JavaScript. 
Một phương pháp khác để làm việc với CSS sẽ được trình bày trong Chương 
22 “Giới thiệu về jQuery”, trong đó việc thay đổi các style CSS được thực 


hiện bằng cách chỉnh sửa style CSS áp dung cho các phần tử HTML. 
Phương pháp này được ưa dùng hơn khi làm việc với CSS và JavaScript vi 
nó tách biệt phần hiển thị (CSS) với hành vi (mã JavaScript). 


Thay đổi các thuộc tính định dạng với 
JavaScript 

Một trong những việc đầu tiên cần làm là loại bỏ dòng mã ở đầu hàm 
displayData() để xóa đường viền của bảng: 


table.border = "1"; 


Trong hàm displayData( ) có hai vòng lặp chính: vòng lặp thứ nhất hiển thi 
các tiêu đề cột và vòng lặp thứ hai hiển thị dữ liệu của bảng. Vòng lặp hiển thị 
tiêu đề cột có dạng như sau: 


for (colHead = 0; colHead < 
if (xm1IEl[6].chi1d 
continue; 


l[0].childNodes.length; colH 
Head].nodeType != 1) { 


var tableHead - do 
var colName - 
document.createTextNode(xmlEl[0].childNodes[colHead] 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


reateElement("th"); 


J 
tbody.appendChild(row); 
Vòng lặp thứ hai hiên thi dữ liệu trong bảng như sau: 


for (i = 0; i < xmlEl.length; i++) { 

var row = document.createElement( "tr ”); 

// Tao các ô cho mỗi dóng/td 

for (j = 0; j < xmIEl[1].childNodes.length; j++) { 
// Bỏ qua dòng nếu kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeType !- 1) ( 

continue; 

} 


// Lấy dữ liệu từ tài liệu XML 
var td = document.createElement("td"); 


j 


var xmlData - 
document.createTextNode(xmlEl[i].childNodes[: 
td.appendChild(xmlData); 

row.appendChild(td); 


} 
tbody.appendChild(row); 


Những thay đổi về hiển thi dữ liệu chủ yếu được thực hiện trong hai vòng lặp 
này. Tôi sẽ in đậm những đoạn mã thay đổi. 


Chẳng hạn bạn muốn thay đổi font chữ thành Arial thông qua việc sử dụng thuộc 
tính định dang fontFamily trong JavaScript. Font chữ cần được thay đổi trong 
cả hai vòng lặp để toàn bộ văn bản trong bảng có cùng định dạng font chữ Arial. 
Sau khi thêm đoạn mã, hai vòng lặp sẽ như bên dưới (chú ý hai dòng mã mới 
được in đậm): 


for (colHead = 0; colHead < xmlEl[0].childNodes.length; colH 


} 


if (xmlEl[0].childNodes[colHead].nodeType != 1) { 
continue; 


var tableHead = do 
var colName - 
document.createTextNode(xm1El[0].childNodes[colHead] 
tableHead.style.fontFamily = "Arial"; 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


eateElement("th"); 


tbody.appendChild(row); 
for (i = 0; i < xmlEl.length; i++) { 


var row = document.createElement("tr"); 
// Tao các ô cho mói dóng/td 
for (j = 0; j < xmIEl[1].childNodes.length; j++) { 
// Bỏ qua dòng nếu kiểu khác 1 
if (xmlEl[i].childNodes[j].nodeType != 1) { 
continue; 


} 

⁄/ Lấy dữ liệu từ tài liệu XML 

var td = document.createElement("td"); 

var xmlData - 
document.createTextNode(xmlEl[i].childNodes[: 
td.style.fontFamily - "Arial"; 


td.appendChild(xmlData); 
row.appendChild(td); 


} 
tbody.appendChild(row); 
J 


Kết quả của những thay đối trên và việc loai bó đường viền của bảng sẽ tao ra 
một bảng giống như trong Hình 20-2. 
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HÌNH 20-2 Bước đầu áp dung style cho bảng với CSS. 


Thêm hiệu ứng màu sé làm cho bảng dé doc hơn, đặc biệt là khi có nhiều dòng 
dữ liệu được hiên thị. Thông thường các màu được bố trí xen kẽ trên mỗi hàng 
dữ liệu và có màu riêng cho phần tiêu đề. Dưới đây là hai vòng lặp sau khi đã 
thêm màu nền cho các dòng dữ liệu (chú ý, đoạn mã thêm vào được in đậm): 


for (colHead = 0; colHead < xmlEl[0].childNodes.length; colH: 
if (xmlEl[0].childNodes[colHead].nodeType != 1) { 


continue; 


var tableHead - document.createElement("th"); 

var colName - 
document.createTextNode(xmlEl[0].childNodes[colHead] 
tableHead.style.fontFamily = "Arial"; 
tableHead.style.backgroundColor = "£Zaaabba"; 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


j 


tbody.appendChild(row); 
for (i = 0; i < xmlEl.length; i++) { 


var row 


= document.createElement("tr"); 


// Tao các ô cho mói dóng/td 


for (j 


j 


0; j < xmlEl[i].childNodes.length; j++) { 

// Bỏ qua phần tử nếu có kiểu khác 1 

if (xmlEl[i].childNodes[j].nodeType != 1) { 
conta : 


} 

⁄/ Lấy dữ 
var td = d 
var xmlData 
document.createTextNode(xmlEl[i].childNodes[ 
if (1? 2) { 

td.style.backgroundColor = "£Zaaabba"; 


ài liéu XML 
reateElement("td"); 


td.style.fontFamily - "Arial"; 
td.appendChild(xmlData); 
row.appendChild(td); 


tbody.appendChild(row); 


} 


Đoạn må trên sử dung toán tử mó-dun (96) để tô màu xám nhat cho các dòng dữ 
liệu ở vi trí chán trong bảng. Vi chỉ có hai dòng dữ liệu nên dòng thứ hai được tô 
màu. Hình 20-3 hiển thị kết quả sau khi thêm màu nền cho bảng. Bạn có thể tìm 
thấy phiên bản hoàn thiện của trang web này trong thư mục CompleteCode 
Chương 20 của Tài nguyên đi kèm. 


Æ Books - Microsoft Internet Explorer 
File Edit View Favorites Tools Help “ 


[x] A đà | JO Search. e Favorites © (2-42  -[)  Ø 3$ 
http://localhost/Code/Chuong20/cssbooks.htmll ~B o 
title author isbn publisher 
MySQL Bible Steve Suehring 9780764549328 Wiley Publishing Inc. 


JavaScript - Huóng dãn học qua ví du Steve Suehring 9780735624498 Microsoft Press 


& Done 3 My Computer 


HINH 20-3 Thêm màu vào bång st dung CSS. 


Tao ô thå xuông dông 


Bạn có thé chỉnh sửa lai ứng dung đánh dấu trang trong Chương 19 để tao ra một 
ô thả xuống chứa dữ liệu dạng danh sá án bản. Đôi khi tính năng này còn 

ạn nhập dữ liệu vào ô, giao diện sẽ 
đưa ra một danh sách các từ gợi y t g Với từ được nhập, giúp người dùng 
nhập liệu dễ dàng hơn. Google Su 9t ứng dung như vậy. 


Một ví dụ áp dụng nguyên lý này đó là ô thả xuống hiển thi các nội dung khi 
người dùng nhập liệu (ví dụ như danh sách các Bang của Mỹ). Khác biệt lớn 
nhất trong ứng dụng này là tập dữ liệu truy xuất nhanh từ ô thả xuống được quản 
lý. Cháng hạn, với tập dữ liệu là danh sách 50 bang của Mỹ, người dùng có thể 
dễ dàng và nhanh chóng truy xuất ra một bang trong đó. Ngược lại, nếu người 
dùng làm việc với tập dữ liệu trên 1.000.000 bản ghi thì việc truy xuất có thể rất 
lâu và không đáp ứng được yêu cầu. Một ví dụ khác là bạn có thể sử dụng ứng 
dụng này trong công việc để truy xuất tới danh sách tên nhàn viên của một công 
ty. 


Dưới đây là minh hoa cho ứng dụng này. Sử dụng đối tượng xm1HttpRequest 
để truy xuất tới danh sách 50 bang của Mỹ. Khi người dùng nhập ký tự w, ứng 
dụng sẽ truy xuất tới tất cả các bang có tên bắt đầu bằng ký tự w, giống như 
trong Hình 20-4. 


hg/ chose: D * 3 X | B Tmiiinlm 


Nhàp tén Bang: ¡ 


HÌNH 20-4 Truy xuất tới danh sách các bang có tên bắt đầu bằng ký tự ^w. 


Màu nền của các phần tử trong danh sách sé thay đổi khi ta di chuột lên các bang 
khác nhau, giống như trong Hình 20-5, ở đây tôi đang di chuột lên bang 
Wisconsin (con trỏ chuột không hiển thị trong ảnh chụp màn hình). 


pohote D 3X 


HÌNH 20-5 Màu nền của các phần tử trong danh sách sẽ thay đổi khi di chuyển chuột lén các 
bang khác nhau. 


Cuối cùng, khi nhấn chuột vào một bang bất ky, tên của bang đó sé được sao 
chép vào text box. Kết quả cuối cùng của ứng dung được biểu diễn trong Hình 
20-6. Từ đây, form có thể được gửi đi và xử lý dựa trên dữ liệu nhập vào. 


eft Elit ^X dmn ARE 


Nhap tên Bane: Viscos 


yoming 


\ 
HÌNH 20-6 Sao chép tên một bang vào text box. 


Đoạn mã này hoạt động tương tự như đoạn mã trong ứng dụng đánh dấu trang ở 
Chương 19, cung cấp tính năng cho phép người dùng nhập từ khóa và hiển thị 
một danh sách thu hẹp để lựa chọn. Hãy cùng xem xét trường hợp khi người 
dùng nhập ký tự n. Khi đó, text box sẽ hiển thị 8 bang trong danh sách thả 
xuống. Nếu tiếp tục nhập thêm ky tự mới — ví dụ nhập từ new — danh sách thả 
xuống sẽ thu hẹp chỉ hiển thị 4 bang và nếu tiếp tục nhập thêm các ký tự khác, 
danh sách thả xuống sẽ thu hẹp hơn nữa. 


Đoạn mã cho ứng dụng này được trình bày trong Ví dụ 20-1. 


VÍ DU 20-1 Üng dung tim kiém. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Tìm kiếm Bangc/title» 

«script type-z"text/javascript" data-src="ehandler. Js"></sc 

</head> 

</body> 

«form name="nameform" id-z"nameform" actlon="" method="post 

Nhập tên Bang: «input id-z"textname" type="text" name=”text 

«/form» 

«div 1d="data"></d1v> 

«script type-z"text/javascript"» 

function textSearch() { 
var textName = document.getElementById("textname") 
var dataNode = document.getElementById("data"); 
while (dataNode.hasChildNodes()) ( 

dataNode.removeChild(dataNode.firstChild); 


if (textName.value !- "") { 
listName(textName.value); 
} 
} 
function readyAJAX() { 
try { 
return new XMLHttpRequest (); 
} catch(e) { 
try { 
return new ActiveXObject( 'Msxm12.X 
} catch(e) { 
try { 
return new ActiveXObject( ' 
} catch(e) { 
return "Ban cán sü 
} 
} 
} 
} 


function listName(text) { 
var nameList = AJAXresponse.split(","); 


var pattern - "^" + text; 


var nameRegexp - new RegExp(pattern, "i"); 
for (var i = 0; i < nameLlst.length; 1++) { 
var existDiv = document . getElementByTd (nam 


if (! existDiv) { 


if (nameList[i].match(nameRegexp)) 
var displayDiv - document. 
var newDiv - document.crea 
if (window.attachEvent) { 


) else 


} 


newD1v. 
newD1v. 
newDiv. 
newDiv. 
newDiv. 
newDiv. 
newDiv. 


newDiv.attachEvent 
document. f 
e. 
newDiv.attachEvent 
e.srcEleme 
newDiv.attachEvent 
e.srcEleme 

{ 


newD1v. addEventL1s 
document. f 

th 
newDiv.addEventLis 
this.style 
newDiv.addEventLis 
this.style 


setAttribute("id",n 
style.background = 

style.color = "#000 
style.border = "sol 
style.display = "bl 
style.width - "175p 
appendChild(documen 


displayDiv.appendChild(new 


} 
} 
var requestObj = readyAJAX( ); 


var url = "http://YOUR SERVER HERE/statelist.php"; 


requestObj .open("GET",url,true); 
requestObj . send( ); 
var AJAXresponse; 


requestObj.onreadystatechange = function() { 
if (requestObj.readyState == 4) { 
if (requestObj.status == 200) { 
AJAXresponse - requestObj . response 
) else { 
alert(requestObj.statusText); 
} 


} 


var textEl = document.getElementById("textname"); 
EHandler.add(textEl,"keyup", function() { textSearch(); } 
</scrlpt> 

</body> 

</html> 


Đoạn mã trên chủ yếu sử dung lai những đoạn mã đã được giới thiệu trong cuốn 
sách này, tuy nhiên tôi sẽ vẫn giải thích ngắn gọn. 


Đoạn mã truy xuất tới danh sách các bang bằng cách gọi tới file 
statelist.php phía server. File nà ê một danh sách các bang phân tách 
nhau bởi dấu phẩy như sau: 


Alabama,Alaska,Arizona,Californi ,Delaware,Florida,Georgia, . . . 


File statelist.php phân tách danh sách bang dựa vào dấu phẩy và đặt các 
bang vào mót máng có tén là nameList nhu sau: 


var nameList = AJAXresponse.split(","); 


So với ứng dung trong hai chương trước (Chương 18 và 19), đoạn mã bổ sung 
các style CSS để tạo các ô thả xuống cho phép người dùng nhấn chuột để chọn. 
Phần mã bổ sung được đưa vào hàm 1istName( ) mà ban đã thấy trong Chương 
19. Hàm 1istName sử dung hàm lắng nghe sự kiện và áp dụng các style CSS 
cho các thẻ HTML DTV bằng đoạn mã in đậm dưới đây: 


function listName(text) { 
var nameList = AJAXresponse.split(","); 
var pattern - "^" + text; 
var nameRegexp - new RegExp(pattern, "i"); 
for (var i = 0; i < namelList.length; i++) { 
var existDiv - document.getElementById(nameL 
if (! existDiv) { 


if (nameList[i].match(nameRegexp)) { 


var displayDiv 


- document.ge 


var newDiv - document.create 
if (window.attachEvei 


) else 


j 


newD1v. 
newD1v. 
newD1v. 
newD1v. 
newD1v. 
newD1v. 
newD1v. 


newDiv.attac 
docul 


newDiv.attac 
e. sri 
newDiv.attac 
e.sr: 
i 


newDiv.addEv: 
docul 


newDiv.addEv: 
this 
newDiv.addEv: 
this 


setAttribute( 
style.backgro! 
style.color - 
style.border : 
style.display 
style.width - 
appendChild(d: 


displayDiv.appendChi. 


Tiếp nhận dữ liệu đầu vào từ 


người dùng và AJAX 


Bước tiếp theo trong quá trình phát triển ứng dụng AJAX là tiếp nhận và xử lý 
dữ liệu đầu vào. Nói tới ứng dụng AJAX là nói tới những ứng dụng cung cấp 


một giao diện mang tính tương tác cao dựa trên các hành động của người dùng. 
Tuy nhiên, để tạo ra những ứng dụng đó, bạn cần tìm hiểu thêm về các ứng dụng 
xử lý dữ liệu đầu vào phía server trong khi nói dung đó lại nằm ngoài phạm vi 
của cuốn sách nhập môn này. 


Hy vọng trong khuôn khổ của cuốn sách này, bạn có thể 

nhận thấy việc xây dựng ứng dụng AJAX không có gì hơn ngoài việc cung cấp 
những ứng dụng thân thiện và có tính tương tác cao và hầu hết công việc đều 
xoay quanh việc sử dụng JavaScript chứ không chỉ riêng đối tượng 
XMLHtppRequest. XMLHttpRequest đơn giản chi là phương tiện để lấy dữ 
liệu trong chương trình. Tầng hoạt động của XMLHttpRequest nằm bên dưới 
tầng giao diện tạo nên trang web. Do đó, người dùng không bao giờ nhìn thấy 
quá trình xử lý của đối tượng XMLHttpRequest, họ chỉ thấy những gì được hiển 
thị bởi ứng dụng. 


Hai chương còn lại của cuốn sách này sẽ dựa trên những kiến thức và ví dụ mà 


bạn đã tìm hiểu cho tới thời điểm này, nhưng sẽ sử dụng một thư viện JavaScript 
mới, đó là thư viện jQuery. 


Bài tập 


1. Tạo hàm xử lý sự kiện submit cho ví dụ hiển thi danh sách các bang để hiển 
thị bang được chọn khi người dùng gửi form. 


2. Tao ứng dụng sử dụng đối tượng XMLHttpRequest, trả về danh sách tên (ví 
dụ như danh sách nhân viên). Bạn có thể sử dụng file văn bản thường hoặc 
file XML để lưu dữ liệu. 


Phán 5 
jQuery 
Chương 21: Giới thiệu về các thư vien và Framework của JavaScript 


Chương 22: Giới thiệu về jQuery 
Chương 23: Các hiệu ứng và plug-in cho jQuery 


Chương 21 
Giới thiệu về cá 
Framework củ 


uW viện và 
aScript. 


Sau khi đọc xong chương này, bạn có thể: 


a Hiểu vai trò của các thư viện và framework JavaScript. 
» Biết cách tự tao thư viện JavaScript. 


a Hiểu vai trò của các thư viện và framework JavaScript bên thứ ba và cách 
tìm kiếm thêm thông tin về chúng. 


Tìm hiểu các thư viện lập trình 


Trong thuật ngữ lập trình, thư viện (library) là một tập hợp các đoạn mã cung 
cấp những tính năng thông dụng hoặc tính năng bổ sung cho ứng dụng. Thông 
thường, thư viện chứa một hoặc nhiều file trình bày những đối tượng và chức 
năng nhất định. Trong một ứng dụng, người lập trình tích hợp hoặc gọi tới thư 
viện để sử dụng các đối tượng và chức năng này. Như vậy, các thư viện và 


framework JavaScript giúp báo tri và phát triển các tính năng nâng cao hoặc bó 
sung. Nhờ đó, những khó khăn do môi trường phát triển đa trình duyệt cũng 
được giảm bớt. 


Trọng tâm của chương này là các thư viện JavaScript, bao gồm việc tự định 
nghĩa thư viện JavaScript và tìm hiểu một số thư viện và framework JavaScript 
phổ biến. 


Tự định nghĩa thư viện JavaScript 


Dù làm việc với bất cứ ngôn ngữ nào, các lập trình viên cũng rơi vào tình huống 
phải viết đi viết lại một tính năng nào đó, do vậy họ tạo ra những thư viện cá 
nhân lưu những tính năng hữu ích cho các dự án trong tương lai. 


Đoạn mã xử lý sự kiện ở Chương 11, ehandler.js, hướng dẫn cách tạo thư viện 
bằng cách tạo namespace. 


var EHandler = {}; 


Trong namespace, thư viện EHand hai hàm. Đầu tiên là: 
EHandler.add = 

Thứ hai là: 

EHandler.remove = 


Mặc dù ngắn nhung EHand1er là một thư viện hoàn chinh. Như vậy, thư viện 
không nhất thiết phải lớn mới hữu ích. Bạn đã thấy rất nhiều ví dụ sử dụng 
EHand1er trong phần đầu của cuốn sách này. Với ý niệm về thư viện Ehand1er 
sẵn có trong đầu, trong ví dụ tiếp theo, bạn sẽ tự tạo một thư viện JavaScript. 


Tạo thư viện 
1. Dùng Microsoft Visual Studio, Eclipse hoặc trình soạn thảo khác mở file 
library.js trong thư muc mã nguồn mẫu Chương 21 thuộc phần Tài nguyên đi 


kèm. 


2. Trong file library.js, thêm vào đoạn mã sau (thay thế cho dòng chú thích 


TODO) dé tao namespace và sau dó tao mót hàm: 


var MyLibrary = {}; 
MyLibrary.sendAlert - function(mesg, elm) { 
alert(mesg); 


H 
. Luu và dóng file. 


. MG file librarypage.htm. Trong file librarypage.htm, thém dóng mà in dàm 
dưới đây (thay thé cho dòng chú thích TODO): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Ví du đơn giản</title> 

«script type-z"text/javascriptt" data-src-'library.js"»«/s« 
</head> 

<body> 

«script type-"text/javas 
MyL1brary.sendAlert(“x1 
</script> 

</body> 

</html> 


lây là một thông báo"); 


. Dùng trinh duyệt mở trang librarypage.htm. Ban sẽ thấy một hộp thoại thông 
báo như sau: 


Message from webpage Ii 


A xin chào, dày là môt thóng báo 


Xử lý su cố Nếu không thấy hộp oai thí s báo nhu trên, hãy kiểm tra lại 
đường dẫn tới file library.js. Tro trang librarypage.htm trước đó 
giả định rằng file library.js nằm trong Cùng thu mục với file HTML. 


Khi tạo và sử dụng các thư viện, hãy lưu ý tránh xung đột hoặc trùng lặp với các 
hàm đã tôn tại và từ khóa của chun ECMA-262. Ngoài ra, nếu bạn dùng một 
thư viện ngoài như jQuery hoặc YUI, cần đảm bảo thư viện bạn tạo không xung 
đột với quy ước đặt tên của các thư viện đó. 


Sơ lược vé các thư viện và 
framework JavaScript phổ biến 


Có nhiều thư viện và framework dùng chung phục vụ cho việc lập trình 
JavaScript. Mục đích của chúng là xử lý những tác vụ khó và giúp lập trình viên 
phát triển ứng dụng web JavaScript dễ dàng hơn. 


Các lập trình viên web thường mất nhiều thời gian để làm cho trang web có giao 
diện và vận hành như nhau trên các loại trình duyệt. Một ưu điểm quan trọng khi 
sử dung các thư viện và framework JavaScript là chúng giải quyết những vấn đề 
đau đầu liên quan đến sự tương thích giữa các trình duyệt. Tất cả các thư viện và 
framework JavaScript phố biến đều hỗ trợ để các tính năng của riêng chúng có 
thể chạy trên nhiều trình duyệt khác nhau. 


JQuery 

jQuery có danh sách tính náng phong phú vói nhiêu tùy chon manh, khá náng 
mở rộng và sự hỗ trợ tuyệt hảo từ cộng đồng người dùng. jQuery được đóng gói 
hoàn chỉnh trong một file JavaScript. Với jQuery, bạn có thể tạo hiệu ứng cho 
trang web, tăng cường tính khả dụng và giúp thao tác với dữ liệu bằng AJAX trở 
nên dễ dàng hơn. Một điểm cộng nữa là jQuery đi kèm cùng bộ Visual Studio 
2010 của Microsoft. Chương 22 “Giới thiệu về jQuery” và Chương 23 “Các hiệu 
ứng và plugin cho jQuery" sẽ giới thiệu chi tiết hơn về jQuery. Bạn có thể tìm 
hiểu thêm thông tin vé jQuery tai địa chỉ http://jquery.com. 


Yahoo! User Inter 
dùng Yahoo!) 


Giao diện người dùng Yahoo! (YUT) cung cấp cá JavaScript và CSS, giúp đơn 
giản hóa công việc phát triển ứng dung web. Giống nhu jQuery, YUI có những 
tính năng giúp nâng cao tính khả dụng và cải thiện ứng dụng web. Một ưu điểm 
nữa là tài liệu đặc tả của YUI rất đầy đủ. Bạn có thể tìm hiểu thêm về YUI tại địa 
chi http://developer.yahoo.com/yui/. 


lao diện người 


MooTools 


MooTools là một thu viện rất nhỏ nhung hết sức tối ưu cho JavaScript. 
MooTools khác YUI và jQuery ở chỗ nó tập trung vào việc tối ưu quá trình xử lý 
JavaScript, trong khi YUI và jQuery tập trung vào các hiệu ứng, CSS và các 
tương tác trực tiếp với người dùng. Dĩ nhiên, như thế không có nghĩa là 
MooTools không có các hiệu ứng — MooTools cũng cung cấp nhiều hiệu ứng 
như accordion menu (menu có khả năng mở rộng hoặc thu gọn các mục menu 
con) và thanh trượt slider tương tự như YUI và jQuery. MooTools được khuyên 


dùng cho những ứng dung JavaScript bậc trung đến cao cáp; Ban có thé tham 
khảo thêm thông tin chi tiết về MooTools tai dia chi http://mootools.net/. 


Các thu vién khác 


Có nhiều thu viện và framework khác cho JavaScript — số lượng lớn đến độ 
không thể trình bày hay nhắc đến tất cả trong cuốn sách này. Bạn có thể ghé 
thám trang http://en.wikipedia.org/wiki/Comparisonof JavaScriptframeworks 
để tìm hiểu thêm về các framework JavaScript. 


Bài tập 


1. Nghiên cứu từng thư viện và framework có trong chương này. Theo bạn, thư 
viện hay framework nào dễ học nhất đối với người mới lập trinh JavaScript? 
Tại sao? 


2. Tạo một thư viện JavaScript vó cript ngoài. Tham chiếu file đó 


trong một trang HTML và goi t 


Chuong 22 
Giới thiệu vé jQuery 
Sau khi doc xong chương này, bạn có the: 


» Nắm được cách liên kết tới jQuery trong HTML. 
= Nắm rõ các khái niệm và cú pháp quan trọng của jQuery. 


» Sử dụng jQuery trong trang web. 


Thóng tin co bán vé jQuery 


ua dùng và dễ sử dung. jQuery 
hơn vi nó giúp gỡ bó rào cản 
Hyệt khác nhau. 


jQuery là một framework JavaScrig 
giúp việc lập trinh JavaScript trở ní 
không tương thích JavaScript trên 


Toàn bộ thư viện jQuery được gói gọn trong một file JavaScript, điều này giúp 
đơn giản hóa việc đưa jQuery vào mã JavaScript. Cú pháp jQuery cũng rất dễ 
hiểu, jQuery sử dụng một namespace đơn giản và tính năng thống nhất. Khi 
được kết hợp với tiện ích jQuery User Interface (UI) (sẽ được đề cập trong 
Chương 23 “Các hiệu ứng và plug-in cho jQuery”), jQuery giúp bạn tạo ra 
những ứng dụng web mạnh, có tính tương tác cao. 


Chương này sẽ giới thiệu những tính năng cơ bản nhất của jQuery, trong đó có 
việc tải và sử dung jQuery trong JavaScript. 


Su dung jQuery 


Ban có thể tải về jQuery tại dia chi http://www.jquery.com/. Trong phần này, bạn 
sé tìm hiểu cách tải và tích hợp jQuery vào trang web. 


Hai phién bàn jQuery 

Trên trang chủ của jQuery, có hai phiên bán jQuery: một phiên bản sản phẩm và 
một phiên bản phát triển. Bạn nên tải và sử dụng phiên bản sản phẩm nếu không 
có ý định phát triển các plug-in cho jQuery hoặc muốn tìm hiểu sâu hơn về phần 
lõi của jQuery. 


Ngoài ra, còn có một lựa chọn khác, đặc biệt là để thực hiện các bài thực hành 
trong chương này, đó là sử dụng mạng phân phối nội dung (Content Delivery 
Network - CDN) dé truy cập tới phiên bản jQuery được lưu trữ trên server. 
Google lưu trữ jQuery và các thư viện khác thông qua trang website API của 
hãng. Điều này cho phép bạn sử dụng jQuery trong trang web và sử dụng các 
chương trình JavaScript mà không cần có file thư viện jQuery trên server cục bộ. 
Xem thêm thông tin tại địa chỉ 
http://code.google.com/apis/libraries/devguide.html. 


Chú ý Nếu mới bát đầu làm việc với ery, tôi khuyên bạn hãy tải và lưu 
trữ file thư viện jQuery trên máy ) dung phiên bàn cuc bộ giúp ứng 
dụng web chạy nhanh và tin cậy iéc sử dụng phiên bản CDN. Ví 


dụ, nếu sử dụng phiên bản CDN ạng bị mất, khi đó các ứng 
dụng sử dụng thư viện CDN sẽ khôn thể hoạt động. Tuy nhiên, với các ví 
dụ và bài tập trong chương này, việc sử dụng thư viện CDN là hoàn toàn phù 
hợp. 


Để hoàn thành các bài tập trong chương này đòi hỏi bạn phải có một thư viện 
jQuery trên máy tính cuc bộ hoặc phải kết nối tới một thư viện jQuery trên 
website CDN. 


Liên kết với jQuery 

Cách liên kết jQuery vào trang web cũng giống như cách liên kết các file 
JavaScript ngoài khác - đó là sử dung thẻ <script> để trỏ tới file nguồn. Hãy 
xét đoạn mã trong Ví Dụ 22-1. 


VÍ DỤ 22-1 Liên kết jQuery vào trang web. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 


"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Tích hop JQuery</t1tle> 

«script type-z"text/javascript" data-src="”7Jquery-1.4.3.m1n. 
</head> 

<body> 

</body> 

«/html» 


Sau khi, bạn đã tải phiên bản thư viện jQuery về máy tính hoặc tham chiếu tới nó 
trên website CDN và nắm được cách liên kết file thư viện đó vào trong trang 
web thông qua ví du trên, giờ là lúc để tìm hiếu các cú pháp của jQuery. 


Quan trọng Phiên bản 1.4.3 là phiên bản jQuery mới nhất tại thời điểm viết 
cuốn sách. Tuy nhiên, phiên bản này có thể sẽ khác tại thời điểm cuốn sách 
đến với ban, do đó bạn cần thay đổi lại thuộc tính src cho tương ứng với 
phiên bản jQuery được tải về. 


Cú pháp jQuery co 
Khi đã liên kết thư viện jQuery vào trang web, jQuery sẽ thêm vào hàm 
7query(). Ban có thé hình dung đơn giản rằng việc gọi tới các hàm jQuery 
được thực hiện thông qua giao diện hàm 7query( ), nhưng có một cách viết 
ngắn hơn để goi hàm jquery( ), đó là: $( ). Thay vì phải nhập jquery, bạn chi 
cần sử dụng ký tự đô-la theo sau là cặp dấu ngoặc đơn giống như các ví dụ trong 
Bảng 22-1. 


BẢNG 22-1 Một số bộ chọn jQuery 


Cú pháp Mô tả 
$("a") Chọn tất cả các phần tử «à» trong tài liệu. 
$ ( document ) Chọn toàn bộ tài liệu, thường được dùng để truy cập tới hàm rea dy( ), 


hàm này sẽ được trình bày trong phần sau của chương. 
$(”#eTementTD"”) Chọn phần tử có thuộc tính ID băng elementID. 
$(".className") Chọn phần tử hoặc các phần tử có thuộc tính class băng className. 


Ban sé tim hiéu thém vé các bó chon và các hàm lién quan trong phàn sau cüa 
chương này. 


Giống nhu mã JavaScript, câu lệnh jQuery được kết thúc bằng dẫu chấm phẩy 
(;). Một điểm cần lưu ý nữa đó là bạn có thể sử dụng dấu nháy kép hoặc nháy 
đơn để đánh dấu các bộ chọn trong jQuery. Ví dụ, hai câu lệnh sau là tương 
đương nhau: 


$("a") 
$( 'a') 


Trên thực tế, dấu nháy đơn và nháy kép thường được sử dung thay thế cho nhau. 
Các ví dụ trong chương này sẽ sử dụng kết hợp cả hai ký hiệu để giúp bạn làm 
quen với cách viết lệnh jQuery; tuy nhiên, bạn nên chọn cho mình một cách và 
tuân thủ theo cách viết đó. 


Kết nối jQuery tới sự kiện Load 
Một trong những cách phổ biến nhấ 
phần tử trong sự kiện load (hoặc c 
sẽ được đề cập chỉ tiết trong phần c 
điều này thông qua hàm phụ trợ . reac 


iệc với jQuery đó là kết nối các 

a trang web. (Các sự kiện và hàm 
). Trong jQuery, bạn thực hiện 
của phần tử document. 


Hãy nhớ lại ví dụ ở phần trước, jQuery truy cập các phần tử thông qua cú pháp 
$( ). Hãy nhớ rằng ban có thể truy cập tới phần tử document bằng cú pháp: 


$(document) 

Do đó, hàm ready( ) được truy cập nhu sau: 

$(document).ready() 

Bài tập tiếp theo yêu cầu ban tải và cài đặt file thư viện jQuery trên máy tính cá 
nhân hoặc sử dụng phiên bản CDN. Ví dụ này sử dụng phiên bản jQuery 1.4.3, 
tuy nhiên số hiệu phiên bản có thể khác tại thời điểm bạn làm bài tập này. 

Sử dụng hàm Ready của Document 


1. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác 
chỉnh sửa lại file docready.html trong thư mục mã nguồn mẫu Chương 22 


(Tài nguyên di kèm). 


. Trong file, thay thế dòng chú thích TODO bằng đoạn mã được in đậm dưới 
đầy: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Document Ready</title> 

«script type-"text/javascript" data-src=”"Jquery-1.4.3.m1n. 
</head> 

<body> 

«script type="text/javascript"> 
$(document).ready(alert('xin chào')); 

</script> 

</body> 

</html> 

. Luu và dùng trinh duyét mó tran an sẽ thấy một hộp thoại thông báo 
giống như sau: 


Message from webp... = 3¬ 


A xin chào 


p aaie 


Đoạn må trong bài tập này kết hợp mã jQuery (hàm $(document ) . ready( )) 
với đoạn mã JavaScript thông thường, được đại diện bởi hàm alert (). Kết hợp 
jQuery và JavaScript là một khái niệm quan trọng bạn cần nắm rõ: sử dụng 
jQuery để bổ sung cho JavaScript. jQuery làm cho những công việc khó thực 
hiện với JavaScript trở nên dễ dàng hơn, nhờ đó bạn có thể dành thời gian xây 
dựng tính năng thay vì lo lắng về tính tương thích của chương trình khi chạy trên 
các trình duyệt khác nhau. 


Với hàm $(document ) . ready( ), bạn không cần sử dung sự kiện 1oad của 
trình duyệt hay thêm lời gọi hàm trong sự kiện 1oad. Với hàm này, tất cả moi 
phần tử của DOM đều được nạp trước khi gọi hàm . ready(). 


Mách nhỏ Hàm $( document ) . ready( ) là hàm trong tâm trong lập trình 
jQuery. 


Su dung các bó chon 


Bộ chon là chia khóa để làm việc với jQuery và DOM. Ban sử dung bộ chon để 
xác dinh và nhóm các phần tử, sau đó hàm jQuery sé làm việc với các tập hợp 
này. Trong Bảng 22-1, bạn sử dụng bộ chọn để thu thập tất cả các phần tử trong 
một thẻ, một ID hoặc một lớp CSS xác định. Bạn cũng có thể sử dụng bộ chon 
theo những cách nâng cao, ví dụ chọn một số lượng xác định các phần tử hoặc 
chọn các phần tử ở cấp bậc cụ thể, ví dụ chọn những thẻ <p> theo sau thẻ 
<d1v>. Phần này sẽ giới thiệu chỉ tiết về các bộ chọn. 


Mách nhỏ Các bộ chon (selector) và cách thức hoạt động của chúng trong 
jQuery đều dựa trên các bộ chọn trong CSS. Nếu đã quen với bộ chọn trong 

CSS (Xem lại Chương 15 "JavaScript và CSS"), bạn sẽ thấy việc sử dụng bộ 
chọn trong jQuery cũng rất dễ dàng. 


Chọn phần tử the 
Ví dụ trong Bảng 22-1 giới thiệu cú p 
vào thuộc tính ID: 


ông thường để chọn một phần tử dựa 


$("#elementTD") 

Ví dụ, hãy xét đoạn mã HTML sau: 

«a href="#" id="1ink0ne">Liên kết</a> 

Nếu sử dụng JavaScript, bạn sẽ truy cập phần tử này như sau: 
getElementById("linkOne") 

Còn với jQuery, việc truy cập tới phần tử được thuc hiện qua cú pháp: 


$("#1ink0ne") 


Chọn phần tử theo lớp 


Chúng ta có thể chọn các phần tử thông qua lớp bằng cách thêm dấu chám (.) 
vào trước tên của lớp đó. Cú pháp chọn sẽ như sau: 


$(".className") 

Ví dụ, dưới đây là một thé div được áp dụng thuộc tính class (lớp): 
«div class=”spec1alClass"> 

Phần tử này được truy cập thông qua jQuery như sau: 
$(".specialClass") 


Hãy nhớ rằng, theo cách này, ban không thể chi truy cáp một phần tử; bó chon 
theo lớp truy cập tất cả các phần tử thuộc lớp đó. Hay nói cách khác, nếu một 
số phần tử trong trang web có cùng thuộc tính class là “spec1a1C1ass", khi đó 
jQuery sẽ truy cập tới tất cả các phần tử đó thông qua bộ chọn 

$(“. spec1a1C1ass”). Bạn sẽ hiểu thêm về tính năng này trong các phần tiếp 
theo khi các hàm duyệt qua từng phần tử được truy xuất bởi bộ chọn theo lớp. 


Chọn phần tử the phần tử 

Bạn cũng có thể sử dụng bộ chọn để t dp các phần tử theo kiểu, ví dụ nhu 
các phần tử «div», <a>,... Ví dụ, bạn có thé truy cập tới các phần tử <div> 
trong tài liệu như sau: 


$('div') 
Tương tự, để truy cập các phần tử <a>, ban có thể viết: 
$( ra! ) 


Sử dung bó chon theo kiểu cho phép truy cập tất cả các phần tử thuộc cùng kiểu 
trong trang web. Giống như bộ chọn theo lớp, bộ chọn theo kiểu có thể trả về 
nhiều phần tử cùng lúc. 


Chọn phần tử theo cấp bậc 
Như đã đề cập từ trước, bạn có thể chọn các phần tử dựa vào vị trí của phần tử 
đó trong quan hệ với các phần tử khác trong trang. Ví dụ, để chọn tất cả các phần 


tử «a» nằm bên trong phần tử «div», ban có thể sử dung cá pháp sau: 
$( "div a" ) 


Bạn còn có thé chon các phần tử chi tiết hơn. Ví du, nếu muốn chon các phần tử 
«a» nằm sau một thé div xác định, bạn có thể kết hợp bộ chọn theo kiểu cùng 
với cú pháp bộ chọn theo ID. Hãy xem xét đoạn mà HTML sau: 


«div id-"leftNav"» 

«a href-"linki.html"»Lién kết 1</a> 
«a href-z"link2.html"»Lién kết 2«/a» 
«/div» 


Sau đây là cú pháp bộ chon trong jQuery để truy xuất tới hai phần tử <a> trong 
thé div leftNav. 


$("#leftNav a") 


E2333 


Tổng quát hon, nếu muốn chon trực tiếp các phần tử “con cháu 
xác định, bạn có thể sử dụng ký hiệu hơn (>), như sau: 


của một phần tử 


$("div > p") 


Cú pháp này chọn ra các phần tử «p háu trực tiếp của thé div nhung 
không bao gồm các phần tử «p» khác năm bên trong các phần tử «p» được 
chọn. 

Bạn cũng có thé chọn phần tử con thứ n trong một tập hợp bằng bộ chọn :nth- 
child(). Ví dụ này chon ra phần tử con thứ ba: 


$("p:nth-child(3)") 


Ngodi ra cón có mót só bó chon theo cáp bác khác. Ban có thé tim hiéu thém 
trong tài liệu tham khảo vé bộ chon trong jQuery tại dia chi 
http://api.jquery.com/category/selectors/. 


Chon phán tu theo vi trí 

Nhu ban đã thấy, các bó chọn trong jQuery rất “tham lam". Ví du, $( 'a' ) sẽ 
chon tất cả các các thé «a». jQuery cung cấp những cách thức cho phép tìm 
kiếm các phần tử cu thể trong một tập hợp. Một trong những cách đó là sử dung 
bộ chọn first và last. Đoạn mã dưới đây chọn ra phần tử «p» đầu tiên trong 


trang web: 

$("p:first") 

Tương tự, phần tử «p» cuối cùng được chon bằng cú pháp sau: 
$("p:last") 


Ban cũng có thể chon các phần tử truc tiếp theo vi trí. Ví du, hãy xét đoạn mã 
HTML sau: 


<p>Phần tử p đầu tiên</p> 
<p>Phần tử p thứ hai</p> 
<p>Phần tử p thứ ba</p> 


Để chọn phần tử <p> thứ hai, bạn sử dụng cú pháp: 
$("p")[1] 


Chú ý răng mảng phần tử bát đầu từ chỉ số 6, do đó phần tử đầu tiên của mảng 
có chỉ số bằng 0, phần tử thứ hai có . Sử dụng cú pháp này khá 
nguy hiểm, vì việc chọn phụ thuộc da các phần tử trong cấu trúc trang 
web. Nếu thêm thẻ <p> vào trang óc phần tử bạn muốn chọn, khi 
đó chỉ số của phần tử đó sẽ thay đổi, iéc chọn không còn chính xác. Nếu 
có thể, tốt hơn hết hãy sử dụng bộ chọn theo ID để xác định phần tử cụ thể thay 
vì dựa vào chỉ số của phần tử đó. 


Một cách khác để chọn phần tử theo chỉ số đó là sử dụng cú pháp : eq. Ví du, để 
chọn đoạn văn bản thứ ba, bạn có thể viết: 


$("p:eq(3)") 


Cuối cùng, đôi khi việc sử dụng bộ chon theo vi trí chán lẻ cũng rất hữu ích khi 
chọn các phần tử khác nhau trong một tập hợp: 


$("p:even") 


Các bộ chon even (chán) và odd (1ẻ) rất hữu ích khi làm việc với các dữ liệu 
dạng bảng để thay đổi màu sắc của các dòng. Ví du 22-2 minh hoa cho việc sử 
dung bộ chon odd để tạo sự khác biệt vé màu nền giữa các dòng chán lẻ cho một 
bảng. 


Chú ý Đoạn mã trong Ví du 22-2 sử dung hai phần tử chưa được giới thiệu 
chính thức: đó là một hàm người dùng tự định nghĩa và hàm . css( ). Đừng 


chú ý tới chúng. Bạn sẽ tìm hiểu chỉ tiết từng hàm trong phần sau của 
chương. 


VÍ DỤ 22-2 Dữ liệu dạng bảng và jQuery. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 


"http: //www.w3.org/TR/html4/strict.dtd"» 


«html» 
«head» 


<title>Kiểm thử với Bảng</title> 
«script type=”text/Javascript"” data-srcz"jquery-1.4.2.min. 


</head> 
<body> 
<table> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 
<tr> 
<td>Dòng Cột của bảng</td> 
<td>Dòng Cột của bảng</td> 
</tr> 


</table> 


«script type-z"text/javascript"» 
$(document).ready(function() { 
$('tr:odd').css("background-color", "#abac 


3); 
</scrlpt> 
</body> 
</html> 


Phân chính cüa doan må trên nám trong doan må JavaScript thuĝc phân thân 
(body) của HTML: 


$(document).ready(function() { 
$('tr:odd').css("background-color", "#abacab"); 


IM 


Đoạn mã sử dung hàm $( document ) . ready( ) cùng với bộ chon : odd để thiết 
lập màu nền bằng màu có mã hé 16 là Zabacab - tương ứng với màu xám nhat. 
Hình 22-1 hiển thị kết quả của ví dụ này. 


Dong 1 Cot 1 cua bang Dùng 1 Cot 2 cua bang 


Done 3 Cot 1 cua bang Dong 3 Cột 2 cua bang 


Dong 5 Cột 1 cua bang Dong $ Cot 2 cua bang 


HÌNH 22-1 Bảng sau khi được tô màu với sự trợ giúp của jQuery. 


Bạn vừa tìm hiểu những bộ chọn theo vị trí phổ biến nhất, tuy nhiên còn có rất 
nhiều bộ chọn theo vị trí khác. Tham khảo thêm tại địa chỉ 
http://api.jquery.com/category/selectors/. 


Chọn phán tử theo thuộc tính 


Nếu ban vẫn chua cám thấy chắc chắn với việc chon phần tử theo lớp, jQuery 
cho phép bạn chọn các phần tử chỉ chứa một thuộc tính hoặc các phần tử chứa 
một thuộc tính với giá trị xác định. Ví dụ, để chọn tất cả các phần tử ảnh có 
thuộc tính alt, cú pháp chon sẽ như sau: 


$("img[alt]") 


Nếu muốn chọn chỉ những phần tử ánh với thuộc tính a1£ có giá tri xác định, 
bạn có thể viết: 


$("img[alt-'alternate text']") 


Đoạn mã trên chỉ chon ra phần tử ánh nếu thuộc tính a1£ của ảnh đó đúng bằng 
alternate text. Hãy chú ý tới cách sử dụng dấu nháy don và nháy kép trong 
ví dụ này. Bộ chọn được đặt trong dấu nháy kép còn giá trị của thuộc tính a1£ 
được đặt trong dấu nháy don, tuy nhiên hai dấu nháy này có thể đảo ngược vi trí 
cho nhau, dấu nháy đơn dùng cho bộ chọn còn dấu nháy kép cho thuộc tính của 
bộ chọn: 


$('img[alt-"alternate text"]') 


Ban cũng có thé chỉ dùng một loai dấu nháy, tuy nhiên ban phải thuc hiện thoát 
ký tự nháy kép bằng cách thêm ký tự gạch chéo giống như sau: 


$("img[a1t=\"a1ternate text 


này đòi hỏi thuộc tính phải chính 
v bằng chuỗi "alternate text". 
oác " alternate text" đều 


Điều quan trọng cần chú ý đó là ki 
xác. Trong ví dụ này, thuộc tính a7 
Các chuỗi khác như "alternate te 
không phù hợp và không được chọn. 
jQuery cũng chứa các bộ chọn đại diện, không đòi hỏi thuộc tính chọn phải 
chính xác hoàn toàn. Hãy xem một số ví dụ trong Bảng 22-2. 


BẢNG 22-2 Bộ chọn đối chiếu theo thuộc tính. 


Cú pháp Mô tả 

attribute*-value Chọn tất cả các phần tử chứa thuộc tính mà giá trị của nó có chứa chuỗi 

con đang đối chiếu. 

attribute--value Chon tất cả các phần tử chứa thuộc tính mà giá trị của nó có chứa từ đang 

đối chiếu. 

: Chọn tất cả các phần tử hoặc không chứa thuộc tính đang đối chiếu, hoặc 

attribute!=value_ chứa thuộc tính đó nhưng giá trị của nó không khớp với chuỗi đang đối 
chiếu. 

attribute$=value s các phần tử chứa thuộc tính có giá trị kết thúc bằng chuỗi dang đối 

Chọn các phần tử chứa thuộc tính có giá trị bắt đầu bằng chuỗi đang đối 


attribute^-value Z 
chiếu. 


Chọn các phần tử trên form 

jQuery hỗ trợ sẵn một số bộ chọn cho phép chọn các phần tử trên form. Bảng 22- 
3 liệt kê một số bộ chọn này, một vài bộ chọn trong số này sẽ được sử dụng 
trong phần còn lại của chương. 


BẢNG 22-3 Các bộ chọn liên quan tới form. 


Cú pháp Mô tả 

;Checkbox Chọn tất cả check box. 

: checked Chọn tất cả các phần tử được đánh dấu chon, ví du nhu các check box. 
: input Chọn tất cả các phần tử input trên trang web. 

;password_ Chọn tất cả các phần tử input kiểu password. 

:radio Chọn tất cả các radio button. 

:reset Chọn tất cả các phần tử input có kiểu reset. 


;selected_ Chọn tất cả các phần tử đang được chọn trên form. 


: submit Chọn tất cả phần tử input kiể 


Chọn tất cả các phần tử in 


Các bộ chọn khác 

Còn có rất nhiều kiểu bộ chọn khác trong jQuery, ví dụ như những bộ chọn chọn 
tất cả các phần tử ẩn (: hidden) hoặc chon các phần tử hiển thị (: visible) 
hoặc chọn các phần tử được kích hoạt, phần tử bị vô hiệu hóa, v.v... Tham khảo 
thêm tai dia chỉ http://api.jquery.com/category/selectors/ để tìm 
hiểu đầy đủ về các bộ chọn trong jQuery. 


Mách nhỏ Thay vì nghĩ ra những cú pháp chọn phức tạp và dễ dẫn tới sai 
sót, bạn hãy tham khảo các bộ chon trong jQuery 


(http://api.jquery.com/category/selectors/) để tìm hiểu các ví 
dụ và giải pháp có sẵn cho việc sử dụng bộ chọn. 


Hàm trong jQuery 


Cho tới giờ, đã có khá nhiều ví dụ về cách chon phần tử trong jQuery; tuy nhiên, 
chỉ có một số ít ví dụ minh họa những gi ban có thể làm với các phần tử sau khi 
chọn. jQuery sử dụng hàm để thực hiện các hành động trên các phần tử được 
chọn. Hàm có thể là hàm có sẵn trong jQuery hoặc hàm người dùng tự định 
nghĩa. Thông thường, bạn luôn sử dụng kết hợp cùng lúc cả hai kiểu hàm này. 


Duyệt các phần tử trong DOM 

Về bản chất, việc lập trinh web sử dung JavaScript và jQuery thường yêu cầu 
duyệt qua một số phần tử - ví dụ, hàm . each( ) làm việc với một danh sách 
phần tử được chọn, duyệt qua từng phần tử và thực hiện thao tác nào đó (hoặc 
không gi cả) với mỗi phần tử. jQuery chứa rất nhiều hàm hỗ trợ chức năng lặp. 
Quá trình lặp này trong jQuery được gọi là duyệt (traversing). Bạn có thể tìm 
thêm thông tin về các hàm duyệt tại địa chỉ 
http://api.jquery.com/category/traversing/. 


Khi sử dung các hàm duyệt, hầu nhu ban luôn kết hợp với một hàm tu dinh 
nghĩa và bộ chọn $(this). Cũng a this trong lập trình hướng đối 
tượng, bộ chọn $( this) tham chi ang hiện tai — trong trường hợp 
này đó là phần tử dang được duyệt 


Chúng ta hãy cùng xét ví du sau. Đoạn mà HTML dưới đây tao ra một trang web 
xếp hạng các đội trong một giải bóng chuyền hư cấu: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ví dụ vé vòng lặp</title> 
«script type-"text/javascript" data-srcz"jquery-1.4.2.min.js 
</head> 
<body> 
<table> 
<th>Tên độ1</th> 
<th>Thắng- Thua</th> 
«th»Ti lệ thắng</th> 
<tr> 
<td>Đội 1</td> 
<td>12-8</td> 
«td class="”percentage”>0.60</td> 


«/tr» 


«tr» 

<td>Độ1 5</td> 

<td>11-9</td> 

«td class="”percentage”">0.55</td> 
</tr> 
<tr> 

<td>Độ1 4</td> 

<td>10-10</td> 

«td class="percentage”>0.50</td> 
</tr> 
<tr> 

<td>Độ1 2«/td» 

<td>9-11</td> 

«td class="percentage”>0.45</td> 
</tr> 
<tr> 

<td>Độ1 6«/td» 

<td>6-14</td> 

<td class=" tage”>0.30</td> 
</tr> 
<tr> 

<td>Độ1 3 

<td>2-18</t 

«td class="”percentage”>0.10</td> 
</tr> 
</table> 


«script type="text/javascript"> 

$(document).ready(function() { 
$('tr:odd').css("background-color", 

3): 

</script> 

</body> 

</html> 


Khi xem trên trinh duyét, trang web sé trông nhu Hinh 22-2. 


"#abacab 
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qp Favorites FE é Ví du về vòng lặp | 


Tên đội Tháng-Thua Ti lệ tháng 


Đội 11-9 0.53 


Do2 9-11 045 


Đội 2-18 0.10 


HINH 22-2 Trang web xếp hang các đội trong giải bóng chuyền. 


Ví dụ này lặp qua các phần tử chứa thuộc tính class bằng percentage — lớp 
này được áp dụng cho các ô trong cột Tỉ lệ thắng. Trong ví dụ này, các đội có tỉ 
lệ thắng trên 0.5 (có nghĩa là thắng trên một nửa số trận đấu) sẽ được hien thi 
font chữ in đậm trong cột Tỉ lệ Tháng. Ban có thể thực hiện điều này với đoạn 
mã jQuery sau đây, đoạn mã này được thêm vào ngay sau đoạn mã jQuery đã có 
trong trang: 


$('.percentage').each(function() { 
if ($(this).text() >= .5) { 


$(this).css('font-weight', 'bold'); 
x 


}); 


Đoạn mã trên sử dung một bộ chon để thu thập các phần tử có thuộc tính class 
bằng percentage. Sau đó, nó truy xuất tới từng phần tử thông qua hàm 
.each() của jQuery. Trong hàm . each( ), một hàm tự định nghĩa sẽ thực hiện 
phép kiểm tra điều kiện để xác định giá trị trong cột Tỉ lệ thắng có lớn hơn hoặc 
bằng 0.5 hay không. Nếu lớn hơn, đoạn mã sẽ gọi tới hàm .css( ) để thêm thuộc 
tính font-weight được thiết lập là bold cho phần tử. Sau khi thêm đoạn mã 
này vào trang web, kết quả sẽ giống như trong Ví dụ 22-3. 


VÍ DỤ 22-3 Thêm jQuery vào trang web xếp hạng giải bóng chuyền. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ví du về vòng lặp</t1tle> 
«script type-z"text/javascript" data-srcz"jquery-1.4.2.min. 
</head> 
<body> 
<table> 
<th>Tên độ1</th> 
<th>Thắng- Thua</th> 
<th>Ti lệ thắng</th> 


<tr> 

<td>Độ1 1</td> 

<td>12-8</td> 

«td class="”percentage ">0. 60</td> 
</tr> 
<tr> 

<td>Độ1 5</td> 

<td>11-9</td> 

«td class="”percentage ">0. 55</td> 
</tr> 
<tr> 


<td>Độ1 4</td> 

<td>10-10</td> 

«td class="”percentage ">0. 50</td> 
</tr> 


«tr» 
<td>Độ1 2«/td» 
<td>9-11</td> 
«td class="”percentage ">0. 45</td> 


</tr> 
<tr> 
<td>Độ1 6«/td» 
<td>6-14</td> 
«td class="”percentage ">0. 30</td> 
</tr> 
<tr> 
<td>Độ1 3«/td» 
<td>2-18</td> 
«td class="”percentage ">0. 40</td> 
</tr> 
</table> 


«script type-z"text/javascript"» 
$(document).ready(function() ( 
$('tr:odd').css("background-color", "£Zabacab"); 
$('.percentage').each(function() { 
if (S(this).text() >= .5) { 
$(this).css('font-weight', 'bold') 
} 


}); 
}); 
</script> 
</body> 
</html> 


Khi ban dùng trình duyệt mở trang, những dòng tương ứng với các đội có tỉ lệ 
trận thắng trên 0.5 trong cột Tỉ lệ thắng sẽ được in đậm, giống như trong Hình 
22-3. 


Tên đội Thăng-Thua Ti lệ thăng 


Dà5 11-9 0.55 


Dà2 9-11 043 


Đội 2-18 0.10 


HÌNH 22-3 Cột Ti lệ thắng được in đậm với sự trợ giúp của jQuery. 


Nhìn vào kết quả trong Hình 22-3, việc áp dung font in đậm cho toàn bộ dòng dữ 
liệu sẽ làm cho bảng hiển thị đẹp hơn là chỉ bôi đậm trên cột Tỉ lệ thắng. Điều 
này có vẻ khó thực hiện vì đoạn mã đã duyệt qua các phần tử dòng trong bảng 
khi điều kiện kiểm tra được áp dụng để tìm giá trị trong ô Tỉ lệ thắng. May mắn 
là jQuery có một hàm giúp thực hiện việc này: hàm . parent ( ). (Trên thực tế, 
có thể có một vài cách khác nhau và hàm . parent( ) chỉ là một trong số các 
cách đó). 


Về cơ bán hàm . parent( ) sé duyệt ngược lại cây phân cấp DOM để tim thé 
<tr> gần nhất chứa phần tử «£d». Bằng cách áp dung dinh dang CSS cho phần 
tử <tr> ban có thé làm cho toàn bó dòng chuyển thành kiểu in đậm. Đoạn mã 
mới sẽ giống như sau, phần thay đối được in đậm: 


$('.percentage').each(function() { 
if ($(this).text() >= .5) { 
$(this).**parent()**.css('font-weight', 'bol 
J 
3); 


Khi thém doan má trong Ví du 22-3, két quá sé tuong tu nhu trong Hinh 22-4. 


(B Vi dụ về vòng lặp - Windows Internet Expl.. 1= 
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LN ow 


Đội 11-9 0.55 
Do2 9-11 045 


Đội 2-18 0.10 


HINH 22-4 Ap dung dinh dang CSS cho các dòng trong bảng. 


Chú ý Đoạn mã sửa đổi này có trong file listing22-4 .html của Tài nguyên 
đi kèm. 


Sử dung hàm .parent( ) đưa ra một khái niệm mới đó là chuỗi hàm. Chuỗi 
hàm (chaining) là một cấu trúc rất manh trong jQuery, nó cho phép chọn các 
phần tử ở những cấp độ khác nhau cũng như cho phép xử lý đa cấp trong hàm. 
Trong ví dụ này, bộ chọn $(this) gọi tới hàm . parent( ), hàm này thực hiện 


chon phần tử cha của $(this). Sau đó đoạn mã gọi tới hàm .css( ). 


Chuỗi hàm có thể gây ra một số vấn đề nguy hiểm. Sử dụng chuỗi hàm có thể 

khiến đoạn mã trở nên khó đọc và khó bảo trì. Ngoài ra, chuỗi hàm còn tao ra 

các đoạn mã dễ bị lỗi, nhất là khi các phần tử được chọn trong chuỗi thay đối. 

Chuỗi hàm thực sự rất hữu dụng - và theo tôi, bạn nên sử dụng chuỗi hàm nếu 
có thể — tuy nhiên, bạn không thể hy sinh tính dé đọc hay dễ bảo trì của mã. 


Các ví dụ trong chương này cho tới giờ đều sử dụng JavaScript để truy cập và 
thay đổi trực tiếp thuộc tính CSS. Như đã nói trong Chương 15, trên thực tế, 
chúng ta không thường dùng JavaScript để thay đối style hay định dạng trình 
bày của trang web. Cách tốt hơn đó là áp dụng hoặc loại bỏ các style thông qua 
CSS thay vì thay đổi trực tiếp các thuộc tính. Trong jQuery có một số phương 
thức làm việc với các lớp CSS nhu các hàm . hasClass( ), . addClass( ), 
.removeClass(),và .toggleClass(). Xem thêm thông tin vé cách làm việc 
với lớp CSS sử dung các hàm này tai dia chi http://api.jquery.com/category/css/. 


tính 


ss, jQuery cón có các hàm làm 


Làm việc VỚI các 
Ngoài những hàm liên quan tới th 
việc với các thuộc tính của DOM. ác hàm phổ biến nhất đó là hàm 

.attr( ), ngoài ra còn có một số hàm khác ' cũng rất hữu dung nhu . htm1( ) và 
. val(). Phần này sẽ trình bày hàm attr( ), còn hàm .htm1(), .va1(), và 
một số hàm khác sẽ được đề cập sơ lược trong phần cuối. 


Hàm .attr() được sử dung để truy xuất cũng như thiết lập các thuộc tính. Ví 
du, ban có thể vừa truy xuất vừa thiết lập thuộc tính alt của một phần tử ánh 
bằng cú pháp sau đây: 


// Truy xuất thuộc tính alt: 
$("ZmyImageID").attr("alt") 
// Thiết lập thuộc tính alt: 
$("ZmyImageID").attr("alt", "đoạn văn bản mới") 


Chú ý Không nhất thiết phải truy xuất giá trị của phần tử rồi mới thiết lập 


giá tri. 


Thay dói vàn bán và HTML 

Ban có thể viết lại toàn bộ một trang web bằng cách sử dung các hàm nhu 

. text( ) và .val( ). Tất nhiên, có khả năng không có nghia là tốt. Tuy vậy, đôi 
khi chúng ta cần viết lại một phần HTML trong trang hoặc thay đổi các giá trị 
văn bản. 


Hàm .html() cho phép truy xuất và thay đổi toàn bộ HTML trong phần tử 
được chọn. Ví dụ, hãy xét đoạn mã HTML sau: 


«div id="myDiv">Đây là một thé div, nó khá đẹp mắt</div> 
Và đây là mà jQuery: 
$("ZmyDiv").html('«span class="redStyle">Đây là nói dung mới 


Kết quả của mã jQuery này là thé <div> có id là myDiv chứa một phần tử 
<span> cùng với dòng văn bản mới như trong doan má ví du. Ví du trén tuong 
đối đơn giản, tuy nhiên thé <div> có ứa những nội dung phức tập. Sử 
dụng jQuery, bạn có thể viết lại to ài liệu HTML nếu muốn. 


Li 


Cũng giống nhu hàm .h£m1( ), hà 0 trợ truy xuất và thiết lập giá tri 
văn bản cho phần tử được chọn. Tuy , hàm này chỉ cho phép thay đổi văn 
bản, do đó không thể sử dung nó để thay đối HTML. 


«div id="myDiv">Đây là một thé div, nó khá đẹp mắt</div> 


$("#myDiv").text('Đây là nói dung mới của thẻ div'); 


Trong ví dụ trên, chỉ có phần văn bản được thay đổi; đoạn mã không thêm phần 
tử <span> hay áp dụng style cho phần tử được chọn. 


Chèn thêm các phần tử 

Bạn có thế dễ dàng sử dụng jQuery để chèn thêm các phần tử vào trang web. Hai 
hàm cơ bán để thực hiện điều này là hàm :after() và :before( ). Đúng nhu 
tên gọi, hai hàm này chèn tương ứng các phần tử vào trước và vào sau phần tử 
được chọn. 


Ví dụ, vẫn là thé div như trên: 


«div id="myDiv">Đây là một thé div, nó khá dep mắt</div> 
Dưới đây là mã jQuery thêm một thé div khác vào trước thé div hiện tại: 
$("#myD1v"”").before("<div>Đây là thé div mới</Zd1v>"); 

Hàm :after( ) thực thi tương tự: 

$("4myDiv").after("«div»Bày là thé div mới, nó xuất hiện sau 
Khi chay, trang web chứa đoạn mã này sẽ có ba thé <div>: 

<div>Bây là thé div mới</div> i 

«div 1d="myDiv">Đây là một thé div, nó khá dep măt</div> 
<div>Đây là thé div mới, nó xuất hiện sau myDiv</div> 


Các ví dụ trên minh họa việc chèn thêm các phần tử <div> - nhung dĩ nhiên ban 
có thể sử dụng những những hàm này cho bất kỳ phần tử hợp lệ nào khác. 


Hàm callback 
Đôi khi bạn cần chạy một hàm khi oặc một phần của một hàm hoàn 
thành, hàm đó được gọi là hàm ca àm callback thực thi sau khi hàm 
cha của nó hoàn thành. jQuery sử dụng rất nhiều hàm callback, đặc biệt trong 
AJAX. Bạn đã được thấy một ví dụ về hàm callback khi thực hiện lặp sử dụng 
hàm .each(). 


Xem thêm vé hàm callback tại dia chỉ http://docs.jquery.com/Tutorials:How 
jQueryWorks. 


Ban sẽ tìm hiểu thêm một số ví dụ về hàm callback trong phần còn lai của 
chương này. Nếu mới bắt đầu lập trình JavaScript, bạn đừng nên nghĩ phức tạp 
về hàm callback. Hàm callback đơn giản chỉ là một khối mã lệnh được gọi bên 
trong một hàm khác. 


Các sự kiện trong jQuery 


Cho tới giờ, bạn đã gặp một số ví dụ về bộ chọn và các hàm cơ bản trong jQuery. 


Phần cuối của chương giới thiệu về jQuery sé đề cập tới các sự kiện. Cũng tương 
tự như việc xử lý sự kiện trong JavaScript, jQuery cho phép chương trình phản 
hồi lại các sự kiện nhấn chuột, gửi form, nhấn phím, v.v... Khác JavaScript, tính 
tương thích trình duyệt trong xử lý sự kiện của jQuery rất tuyệt vời. jQuery có 
tính tương thích cao với mọi trình duyệt. Điều này đặc biệt đúng với xử lý sự 
kiện, bạn không cần bận tâm tới việc trình duyệt xử lý hàm bạn viết như thế nào. 


Gàn và gỡ hàm xu lý sự kiện 
Hàm .bind() kết nối hàm xử lý sự kiện với sự kiện, ví dụ nhu sự kiện nhấn 
chuột: 


.bind(event, data, handler) 


Trong ví du này, event là một sự kiện bạn muốn đáp ứng, data là đối tượng 
không bát buộc, chứa dữ liệu được truyền vào hàm xử lý sự kiện và handler là 
hàm bạn muốn thực thi khi sự kiện được kích hoạt. 


Ví dụ: 


«a hrefz"/linki.html" id=" 
$("4myLink").bind("click", 
alert("bá nhấn vào liên kết"); 


}); 


Kết quả của đoạn má trên là khi người dùng nhân chuột vào thé <a>, sự kiện 
click được kích hoạt và trang web sẽ hiển thị một hộp thoại thông báo. Chú ý 
rằng ví dụ này không sử dụng tới tham số data trong hàm . bind( ). 


ién kết</a> 


n() 1 


Bạn có thể gắn kết các sự kiện sau đây trong hàm . bind( ): 


» beforeunload 
= blur 

= change 

» Click 

a Qdbclick 

= error 


focus 


= a ÍOCUSỈn 
= focusout 

1 hover 

= keydown 

» keypress 

» keyup 

= load 

m mousedown 
m mouseenter 
= mouseleave 
= mousemove 
= mouseout 
= mouseover 
= mouseup 

= resize 


» Scroll 


» Select 
m Submit 
» toogle 


= unload 


Trong các chương trước, ban đã biết cách bát sự kiện bằng đoạn má ehandler.js 
đã được xây dựng trong Chương 11 “Các sự kiện trong JavaScript và làm việc 
với trình duyệt”. Đoạn mã ehandler.js cung cấp một hàm cho phép gán hàm xử 
lý sự kiện với khả năng tương thích với nhiều trình duyệt. Về cơ bản, chức năng 
của hàm . bind() trong jQuery cũng tương tự như vậy. Điểm khác nhau đó là 
hàm .bind( ) của jQuery có tính tương thích cao hon và mạnh hơn so với đoạn 
mã ehandler.js. 


Dù bạn có thể sử dụng hàm . bind( ) để gán hàm xử lý sự kiện, song jQuery còn 
cung cấp một hàm tắt cũng với chức năng tương tự như hàm . bind( ). Thay vi 
viết .b1nd( "click", funct1on())... bạn chỉ cần viết 


.Click(function().. Ví dụ, bạn có thể viết lại hàm . bind( ) ở ví du trước 
như sau: 


$("ZmyLink").click(function() { 
alert("Đã nhấn vào liên kết"); 


}); 


Không chỉ phán hồi lai các sự kiện nhu nhân vào đường liên kết, bạn còn có thé 
kích hoạt các sự kiện. Ví dụ, hãy xem đoạn mã trong Ví dụ 22-5: 


VÍ DỤ 22-5 Phản hồi lại các sự kiện. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// 
«html» 
«head» 
<title>Ví du về xử ly sự kiénc/title» 
«script type-z"text/javascript" data-srcz"jquery-1.4.2.min. 
</head> 
<body> 
«div id="myDiv"> 
Đây là một văn bản.<br> 
Văn bản nằm trong thẻ div này<br> 
</d1v> 
<p> 
«a id-"braingiaLink" hrefz"http://www.braingia.org"» Steve 
</p> 
«script type=”text/Javascript"> 
$(document).ready(function() { 
//Xử lý sự kiện khi nhấn vào liên kết 
$('ZbraingiaLink').click(function() { 
alert( "xin chào"); 
return true; 
}); 
⁄//Xử lý sự kiện khi nhấn vào thé div 
$("ZmyDiv").click(function() { 
$('ZbraingiaLink').click(); 
3); 
3); 
</scrlpt> 
</body> 
</html> 


Khi trang web được nap vào trinh duyệt, nếu nhấn vào thé <div>, sự kiện 
click của phần tử «a» sẽ được kích hoạt nhu khi bạn nhấn vào phần tử đó. 


Để ngừng xử lý một sự kiện, ban có thé sử dụng hàm unb1nd( ), hàm này có hai 
đối số: 


.unbind(event, function) 


Đối số event là sự kiện bạn muốn ngừng xử lý, còn đối số function là hàm 
hiện tại đang gắn với sự kiện. 


Chú ý Bạn có thể gắn kết nhiều hàm xử lý sự kiện tới cùng một sự kiện 


bằng cách gọi tới hàm .b1nd( ) nhiều lần. 


Các sự kiện của chuột và hàm Hover 

Trong ví dụ trước, bạn đã được thấy in kết (bind) và xử lý sự kiện click. 
Bạn cũng có thể làm việc với các s t khác như mouseover và 
mouseout. Một ví dụ rất thú vị đó ể làm cho các phần tử biến mất và 
xuất hiện trở lại bằng thao tác di chü€ ông nên áp dụng hiệu ứng này cho 
các trang web trực tuyến vì nó có thể gay khó chịu cho người dùng). Ví dụ 22-6 
trình bày một vài dòng mã để làm cho phần tử <a> biến mất khi di chuột lên 
đoạn văn bản bên trong. 


VÍ DỤ 22-6 Làm việc với các sự kiện chuột. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Ví du về xử ly sự kiénc/title» 

«script type-z"text/javascript" data-srcz"jquery-1.4.2.min. 
«style type="text/css"> 


4braingiaLink ( 
border: solid 1px black; 
padding: 3px; 


#wrapperP ( 
padding: 50px; 
} 


</style> 

</head> 

<body> 

«div id="myDiv"> 

Đây là một văn bản.<br> 

Văn bản nằm trong thẻ div này<br> 

</d1v> 

«p 1d="”wrapperP"> 

«a id-"braingiaLink" hrefz"http://www.braingia.org"» Steve 

</p> 

«script type-z"text/javascript"» 

$(document).ready(function() ( 

//Xử lý sự kiện khi nhấn chuột vào liên kết 

$('ZbraingiaLink').click(function() { 
alert( "xin chào"); 
return true; 

3); 

//Xử lý sự kiện khi nhấn vào thé div 

$("ZmyDiv").click(function() { 
$('ZbraingiaLink').click(); 

3); 

//Xử lý sv kiện khi di chuột lén #wrapperP 

$('ZwrapperP').mouseover(function() { 
$('ZbraingiaLink').hide(); 

3); 

//Xử ly sự kiện khi di chuột ra khói #wrapperP 

$('ZwrapperP').mouseout(function() { 
$('ZbraingiaLink').show(); 

3); 

3); 

</script> 

</body> 

</html> 


Phần chính trong đoạn mã trên là các hàm xử lý su kiện . mouseover( ) và 
.mouseout ( ), trong đó sử dung hai hàm bổ trợ của jQuery đó là . hide( ) và 

. show( ). Các su kiện . mouseover( ) và . mouseout ( ) được gắn kết với đoạn 
văn bản có ID là wrapperP. Khi di chuột lên trên đoạn văn bán này, phần tử 


«a» có id là braingiaLink sé biến mất và chỉ xuất hiện trở lai khi ban di chuột 
ra khỏi vùng văn bán. Cần chú y là đường liên kết đó vẫn có thé được kích hoạt 
bằng bàn phím. Hãy nhớ có rất nhiều cách để làm việc với trang web. 


Ngoài ra jQuery còn có hàm . hover ( ), hàm này hoạt động gần giống với các 
sự kiện . mouseover( ) và mouseout( ). Xem thêm về hàm . hover( ) tại dia 
chi http://api.jquery.com/hover/. 


Các hàm xu ly su kién khác 

Nhu đã trình bày trong bảng trước đó, jQuery có rất nhiều hàm xử ly su kiện và 
chương này không thể đề cập tất cả những sự kiện đó. Các bạn có thể tham khảo 
thêm về sự kiện trong jQuery tại địa chỉ 
http://api.jquery.com/category/events/. 


AJAX và jQuery 


Hai chuong truóc dà giói thi&u các " ' dung AJAX. jQuery cũng có các 
hàm hỗ trợ làm việc với AJAX. Và g ữ các tác vụ JavaScript khác, jQuery 
khiến việc sử dụng AJAX trở nên dễ dàng hơn. Phần này sẽ minh họa cách sử 
dụng AJAX trong jQuery. 


jQuery hỗ trợ một vài hàm làm việc với dữ liệu gửi đi và nhận về từ server. 
Trong số đó phải kể tới các hàm . 1oad(), . post( ) và hàm .get( ). jQuery 
cũng bao gồm một hàm AJAX có tên là .a7ax(). 


Sử dụng hàm này, bạn có thể thiết lập các tham số, bao gồm phương thức HTTP 


mà hàm nên sử dụng (GET hoặc POST), thời gian timeout và cách xử lý khi có lỗi 
xảy ra (cũng như khi mã thực thi thành công). 


Thông tin bổ sung Xem thêm tại địa chỉ 


http://api.jquery.com/jQuery.ajax/ để biết đầy đủ về các tham số 
sử dụng trong hàm .a7ax(). 


Hàm a7ax( ) có cú pháp cơ bản như sau: 


$.ajax(1 
parameter: value 
3); 


Bạn có thể truyền nhiều cáp tham số/giá tri parameter: value tới hàm 
.àjax( ); tuy nhiên, thông thường đó là phương thức HTTP, URL và hàm 
callback. Bạn cũng thường phải xác định rõ kiểu dữ liệu trả về, chế độ lưu trữ 
phản hồi trong bộ nhớ lưu trữ đệm (cache), dữ liệu truyền tới server và hàm xử 
lý khi có lỗi xảy ra. 


Chú ý Hàm .ajaxSetup( ) cho phép thiết lập các tham số AJAX mặc định 
như chế độ lưu trữ đệm, phương thức và hàm xử lý sự kiện. 


Sau đây là một ví dụ sử dung hàm . ajax( ) trong thực tế: 


$.ajax(1 
url: "testajax.aspx', 
success: function( 
alert( "Tải 

} 


ng. "); 
}); 


jQuery cũng giới thiệu hàm . getJSON( ) cho phép thực hiện chức năng giống 
như các hàm AJAX trên; tuy nhiên, hàm này còn có khả năng làm việc với dữ 

liệu JSON được mã hóa từ server. Hàm . get JSON( ) tương đương lời goi hàm 
.a7ax() với tham số dataType được thiết lập bằng ' 7son”". 


Ví dụ, hãy xét danh sách các bang theo định dạng JSON sau đây: 
["wisconsin", "California", "colorado”, "T111no1s"”, "Minnesota”, 


Trong ví dụ này, giả định rằng dữ liệu mã hóa theo định dạng JSON được trả về 
khi file json.php được gọi trên server. Dưới đầy là đoạn mã sử dụng hàm 
.a7ax() dé truy xuất dữ liệu và gọi tới hàm showStates nếu thành công: 


$.ajax({ 
type: "GET", 
url: "json.php', 
dataType: "json", 
success: showStates 


lật, 


Hàm showStates tạo ra một danh sách và thêm danh sách này vào select box 
«select» trên form. 


Sử dụng AJAX với jQuery 


Để hoàn thành bài tập này, bạn cần có sẵn file json.php trên cùng thư mục với 
file mà bạn sẽ sử dụng (file json.php có trong Tài nguyên đi kèm). Tương tự các 
bài tập khác về AJAX, file json.php phải nằm trên cùng domain với file tạo yêu 
cầu AJAX. 


1. Chỉnh sửa file ajax.html (file này cũng nằm trong Tài nguyên di kèm cuốn 
sách) bằng một trình soạn thảo bất kỳ. 


2. Chỉnh sửa file ajax.html (file này cũng nằm trong Tài nguyên di kèm cuốn 
sách) bằng một trình soạn thảo bất kỳ. 


«IDOCTYPE HTML PUBLIC "-/ /DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/ 
«html» 

«head» 

«title» Kiém tra AJAX</title> 
«script type-"text/javascript" data-src-"jquery-1.4.2.min.js"» «/script^ 
</head> 

<body> 

«div id="states"> 

</div> 

«script type-"text/Javascript" ^ 

VM (document).ready(function() 1 

V$.ajax(1 

type: "GET", 

url: "json.php", 

dataType: "json", 

success: showStates 

3) 

function showStates(data,status) { 

V$.each(data, function(item) { 

\%("#states").append("<div>" + data[item] + "</div>"); 

D» 


j 

}); 
</script> 
</body> 
</html> 


. Lưu file và dùng trinh duyệt mở lai. Danh sách các bang được hiển thị như 
trong hình dưới đây: 


ferm prax màu — xL ut 


Các lôi AJAX và thời gian timeout 

Hàm .ajax( ) cho phép xử lý các lỗi và thời gian timeout theo cách thân thiện 
với người dùng. Ngoài hàm xử ly trường hợp thành công, ban có thể xác dinh 
hàm xử lý các lỗi với tham số error. Giá trị của tham số error thường là tên 
của một hàm callback. Trong ví dụ dưới đây, tham số error được in đậm: 


$.ajax({ 
type: "GET", 
url: "json.php', 
dataType: "json", 
Success: successFunction, 
**error: errorFunction** 


3); 


Hàm callback được dùng dé xử lý lỗi (hàm errorFunction) nhận ba đối số: 
đối tượng XMLHTTPRequest, chuỗi biểu diễn lỗi được phát hiện và đối tượng 
exception (ngoại lệ), nếu có ngoại o đó, hàm xử lý lỗi cần chấp nhận 
cả ba đối số này và thực hiện tác v t quả trả về. Ví dụ sau đây sẽ hiển 
thị thông báo: 


function errorFunction(xhr, statusMessage, exceptionObj) ‡ 
alert("Có lôi xảy ra: " + statusMessage); 
J 


Việc thiết lập thói gian timeout cho yêu cầu AJAX cũng rất cần thiết. Bạn có thể 
thiết lập thời gian timeout toàn cục thông qua hàm mặc định $. a7axSetup, tuy 
nhiên bạn cũng có thể thiết lập giá trị thời gian t imeout cho từng lời goi cụ thể. 
Sau đây là ví dụ: 


$.ajax({ 
type: "GET", 
url: "json.php', 
dataType: "json", 
Success: successFunction, 
error: errorFunction 
**timeout: 5000** 


3); 


Một điều quan trong có thể thấy đó là thời gian timeout được tính bằng mili giây. 


Như vậy, ví du trên thiết lập thời gian timeout bằng 5 giây. 


Gửi dữ liệu tới Server 

Trong lời gọi AJAX, bạn không chỉ nhận dữ liệu từ server mà còn cần gửi dữ 
liệu tới server và nhận vé phản hồi. Hàm . a7ax( ) được sử dụng với tham số 
data để thực hiện việc gửi dữ liệu tới server bằng phương thức GET hoặc POST. 


Bạn có thể định dạng dữ liệu dưới dạng cặp giá trị key=va1ue phân tách bằng 
dấu & (key1=va1ue1&key2=va1ue2) hoặc dưới dạng các cáp ánh xa {key1: 
va1ue1, key2: va1ue2}. Ví dụ sau sử dung dinh dạng key=va1ue, định dạng 
này còn được gọi là chuỗi truy vấn. 

Ví dụ này gọi tới một chương trình phía server có tên là statefull.php, chương 
trình này nhận đối số đầu vào là hai ký tự viết tắt của tên bang và trả về tên đầy 
đủ của bang tương ứng. 


$.ajax({ 
type: "POST", 
url: "statefull.ph 
dataType: "json", 
Success: successFu 
data: "state-WI" 


IH 


Các tùy chon quan trong khác 
Có rất nhiều tùy chon trong hàm . ajax( ). Ban đã thấy cách sử dung của da số 
các tùy chọn này, ở đây tôi sé nhấn mạnh thêm hai tùy chọn nữa đó là: 


= async 


a Cache 


Tùy chon asyn có giá tri mặc định bằng true, tùy chọn này cho biết liệu đoạn 
mã có phải đợi (và chặn thông tin nhập vào trình duyệt) khi giao dịch AJAX 
được gửi tới server và được xử lý không. Khi được thiết lập bằng true, giao 
dịch AJAX sẽ được thực thi theo cách không đồng bộ, do đó đoạn mã sẽ không 
thực hiện quá trình chặn. 


Thiết lập cache có giá trị mặc định là true trong hầu hết các trường hợp, tùy 
chọn này điều khiển việc lưu trữ đệm cho giao dịch AJAX của jQuery. Điều này 
rất hữu ích khi dữ liệu nhận về không thay đối thường xuyên, vì việc lưu trữ đệm 
øiúp tăng tốc giao dịch, tuy nhiên nó cũng gây ra những rắc rối khi ứng dụng sử 
dụng dữ liệu đã cũ, chưa được cập nhật dù trên server dữ liệu đó đã bị thay đổi. 
Việc thiết lập tùy chọn này bằng fa1se rất hữu dụng để không lưu trữ đệm 
những phản hồi từ server, đặc biệt trong trường hợp bạn phát hiện thấy dữ liệu 
không được nạp lại. 


Tìm hiểu thêm về jQuery 


Cho tới lúc này, bạn mới chỉ thấy một phần nhỏ những gi jQuery có thể làm 
được. Khi đã hiểu sâu hon về JavaScript và cách sử dụng JavaScript để hỗ trợ 
cho trang web, bạn có thể xem xét sử dụng jQuery hoặc một thư viện JavaScript 
khác để phát triển ứng dụng một cách nhanh chóng và dễ dàng. 


Tham khảo thêm các tài liệu về jQ ia chỉ http://www .jquery .com. 


Bài tập 


1. Sử dụng đoạn mã trong file ajax.html (trong bài tập “Sử dung Ajax với 
jQuery”), hãy thêm một style CSS để tạo màu nền xanh cho các thé <div> 
khi di chuột lên tên một trong các bang trong danh sách. Gợi ý: Có rất nhiều 
cách để thực hiện điều này. 


2. Tạo một chương trinh phía server trả về dữ liệu khi truyền tham số sử dung 
hàm #$. a7ax( ). Hiển thị dữ liệu nhận được bằng hộp thoại thông báo alert 
hoặc ghi ra trang web. Ví dụ, bạn có thể viết một chương trình phía server trả 
về tổng của hai số, hoặc giống ví dụ đã được trình bày trả về tên đầy đủ của 
một bang nếu chương trình nhận được tên viết tắt tương ứng. 


Chuong 23 
Các hiệu ứng và plug-in cho 
jQuery 


Sau khi đọc xong chương này, ban sẽ có thể: 


= Hiểu và biết cách sử dụng các hiệu ứng của jQuery. 
= Nắm được jQuery UI. 
» Sử dung jQuery UI. 


giúp tăng 
g 


Với jQuery, ban có thé dễ dàng thực hiện các hiệu ứng cải tiến tính khá dụng 
như kéo thả, làm các phần tử hiện dần hay mờ dần, và dịch chuyển các phần tử. 
Nếu những tính năng này vẫn chưa làm bạn hoàn toàn hài lòng, jQuery còn có 
khả năng mở rộng và có cả một cộng đồng người dùng hỗ trợ. 


Các tính nàng 
cường tính kh 


Một trong những đóng góp của cộng đồng người dùng jQuery là các plug-in. 
Plug-in cung cấp các tính năng bổ sung không có trong gói jQuery lõi. Bạn có 
thể tìm hiểu thêm thông tin về các plug-in và danh sách các plug-in hiện có tại 
trang web về Plug-in của jQuery http://plugins.iquery.com/. 


Chương này cung cấp cái nhìn tống thể về một số hiệu ứng có trong gói jQuery 
lõi cũng nhu trong jQuery UI. 


Các hiệu ứng có sẵn của JQuery 


Như đã đề cập trong phần giới thiệu của chương này, jQuery cung cấp một số 


chức năng giúp tăng cường tính khả dung của ứng dụng web, như hiện và ẩn các 
phần tử, khiến các phần tử hiện dần hay mờ dần. Phần này trình bày một số hiệu 
ứng có sẵn trong gói jQuery. Cần lưu ý tại thời điểm ra đời cuốn sách, jQuery và 
jQuery UI đang được cập nhật để tương thích với Windows Internet Explorer 9, 
vì thế một số ví dụ trong chương này có thể không chạy trên bản beta của 
Internet Explorer 9. Tuy vậy, nhiều khả năng là khi bạn đọc chương sách này, 
jQuery và jQuery UI đã được cập nhật và Internet Explorer 9 đã được phát hành. 


Hiệu ứng hiện, ấn và đảo trạng thái 


Hàm . show( ) và . hide( ) lần lượt làm hiện và ẩn các phần tử trên trang web. 
Các hàm này thiết lập thuộc tính display của CSS. Dé ẩn một phần tử, cần gán 
thuộc tính display bằng none. Lưu ý rằng việc gán thuộc tính display bằng 
none không xóa mất phần tử khỏi DOM, vì thế bạn vẫn có thể làm hiện phần tử 
đó bằng hàm . show( ). Ví dụ 23-1 chỉ ra cách sử dụng hàm . hide( ). 


VÍ DỤ 23-1 Ấn một phần tử. 


<!DOCTYPE HTML PUBLIC "”"-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ẩn phần tüc/title» 
«script type=”text/Javascript"” data-srcz"jquery-1.4.2.min. 
«style type="text/css"> 
.removeBtn { 
color: #0000CC; 
} 


</style> 

</head> 

<body> 

<ul> 

<li id="option1">Lya chon 1 «span class="removeBtn" 

«1i id-"option2"»Lua chon 2 «span class="removeBtn" 

«li 1d="optlon3”">Lựa chon 3 «span class="removeBtn" 

<li id-"option4"»Lua chon 4 «span class-"removeBtn" 

</ul> 

«script typez'"text/javascript"» 

$(document).ready(function() ( 

$('Zoptioni').click(function() ( 
$('Zoptioni').hide(); 


3): 

$('Zoption2').click(function() ( 
$('Zoption2').hide(); 

3): 

$('Zoption3').click(function() { 
$('Zoptions3').hide(); 

3): 

$('4Zoption4').click(function() { 
$('Zoption4').hide(); 

3): 

3): 

</scrlpt> 

</body> 

«/html» 


Tuy nhiên, đoạn mã trong Ví du 23-1 chua được tối ưu hóa vì nó đòi hỏi phải tao 
thêm phần xử lý sự kiện cho từng phần tử option. (Bạn sẽ không gặp kiểu lập 
trình như thế này trong một sản phẩm thương mại; tuy vậy, ví dụ này chỉ phục vụ 
cho mục đích minh họa). Một giải pháp tốt hơn là xử lý các phần tử option bằng 
chính các hàm của chúng. Ví dụ 23- ày cách thức tốt hơn để thuc hiện 
tính năng tương tự bằng jQuery m ø các phần tử option làm mã cứng. 


^ 


VÍ DỤ 23-2 Ấn một phần tử, cải ti ery. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// 
«html» 
«head» 
<title>Ẩn phần tử</title> 
«script type-z"text/javascript" data-srcz"jquery-1.4.2.min. 
«style type="text/css"> 
.removeBtn { 
color: #0000CC; 


} 
</style> 
</head> 
<body> 


<li id-"optioni"»Lua chọn 1 «span class="”removeBtn” 
1d=”remove1">(x)</span></11> 

<li id-"option2"»Lua chon 2 «span class="”removeBtn” 
1d=”"remove2">(x)</span></11> 

«li 1d="optlon3”">Lựa chon 3 «span class="removeBtn" 


id-"remove3"»(x)«/span»«li» 
<li id-"option4"»Lua chon 4 «span class="”removeBtn” 
1d=”remove4"”">(x)</span></11> 
</ul> 
«script typez"text/javascript"» 
$(document).ready(function() ( 
$('.removeBtn').each(function(elm) { 
$(this).click(function() ( 
$(this).parent().hide(); 
3); 
3); 
3); 
</scrlpt> 
</body> 
</html> 


Thay đổi duy nhất trong đoạn mã ở Ví du 23-2 là đoạn: 
$('.removeBtn').each(function() { 


$(this).click(functio 
$(this).pa 


}); 


Đoạn mã này gán một hàm xử lý su kiên nhân chuột (click) cho từng phần tử có 
thuộc tính c1ass là removeBtn. Hàm xử lý sự kiện gọi hàm .hide( ), nhung vi 
khi sự kiện xảy ra, $(this ) trỏ tới phần tử removeBtn (trong trường hợp này 
là phần tử <span>), bạn cần đi ngược cây phân cấp để tìm nút cha, trong trường 
hợp này là phần tử <1 1>. 


Hàm . toogle( ) — đảo trang thái — giúp làm hiện hoặc ẩn phần tử dựa trên trang 
thái hiện tại của phần tử. Ví dụ, khi phần tử đang hiển thị, việc gọi hàm 

. toggle( ) sẽ ẩn nó di. Tương tu, khi một phần tử đang ẩn, phần tử đó sé hiện 
trở lại khi bạn gọi hàm . togg1e(). 


Cả ba hàm . show( ), . hide() và . toggle( ) đều nhận hai đối số: khoảng thời 
gian và hàm callback. Lưu ý đoạn mã trong Ví dụ 23-1 và 23-2, khi bị ẩn, phần 
tử biến mất ngay lập tức. Việc thêm khoảng thời gian vào hàm .h1de( ) khiến 
phần tử ẩn đi sau khoảng thời gian đã định. Giống những hàm khác trong 
jQuery, khoảng thời gian được tính bằng mili giây. Ngoài ra, bạn có thể sử dụng 
hằng số “fast” và “slow”, tương đương với 200 và 600 mili giây. 


Hàm callback thực thi sau khi thao tác ẩn hoặc hiện phần tử được hoàn tất. Một 
ứng ung của hàm callback là hiên thị button Undo (hoàn tác) sau khi ẩn một 
phần tử, ứng dụng này cho phép người dùng hiển thị lại phần tử vừa bị ẩn đi. 


Thêm khoảng thời gian 


1. Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo văn bản 
khác mở file duration.html, ban có thể tìm thấy file này trong thư mục mã 
nguồn mẫu Chương 23 của Tài nguyên đi kèm. 


2. Trong file này, thêm đoạn mã in đậm sau: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Ẩn phần tử</title> 
«script type-"text/javascri 
«style type="text/css"> 
.removeBtn ( 

color: #0000CC; 


" data-srcz'jquery-1.4.2.min. 


} 
</style> 
</head> 
<body> 
<ul> 
<li id-"optioni"»Lua chon 1 «span class="removeBtn" 
«li id-"option2"»Lua chon 2 «span class-'"removeBtn" 
«li id-'"option3"»Lua chon 3 «span class-"removeBtn" 
«li id-"option4"»Lua chon 4 «span class-"removeBtn" 
</ul> 
«script type-"text/javascript'» 
$(document).ready(function() { 
$('.removeBtn').each(function(elm) { 
$(this).click(function() { 
$(this).parent().hide(500); 


3); 
}); 
}); 
</script> 


</body> 


«/html» 


3. Luu file và düng trinh duyét mó trang web. Ban sé tháy mót trang web nhu 
Sau: 


p—À—— 


' Lya chon 1 (x) 
+ Lua chon 2 (x) 
| 


' Lya chon 3 (x 
' [ya chon 4 (x) 


4. Nhãn chuột vào chữ (x) bên canh phần tử bất ky, phần tử đó sẽ biến mất và 
bạn sẽ thấy trang web hiển thị như dưới dây: 


k 


| =i ) E| htp//localostex D » 3 X lé Án pint ' AEN 


X 


+ Lwa chon | (x) 
+ Lua chon 2 (x) 
+ La chon 4 (x) 


et 


Nếu dang dùng trinh duyệt với tiện ích gỡ lỗi nhu tiện ích Firebug của Firefox, 
bạn có thể nhãn chuột phải vào một trong các phần tử option còn lại và chọn 
Inspect Element (kiểm tra phần tử), ban sẽ thấy thuộc tính display của phần tử 
đã ẩn có giá trị bằng none. 

Hiệu ứng hiện dần và mờ dần 


Thêm đối số khoảng thời gian vào các hàm .show( ), . hide( ) và . togg1e( ) 
làm thay đổi độ mờ duc (opacity) của phần tử cho đến khi phần tử hiện hån hoặc 
ân hån. Tính năng tương tự có thể được thực hiện bằng hàm . fadeTn( ) và 

. FadeOut ( ) với chức năng tương ứng là làm hiện dần và làm mờ dần. Xem 
http://api.jquery.com/category/effects/fading để tìm hiểu thêm về 
hai hàm này cũng nhu hàm . fadeTo( ). 


Hiệu ứng trượt 


Một phương thức khác để thiết lập thuộc tính display bằng none là sử dụng 
hàm .slideUp() và.slideDown(). Các hàm này tạo hiệu ứng trượt khiến 
phần tử dường như di chuyển trước khi biến mất, hoặc di chuyển trước khi xuất 
hiện. Hàm . s1ideUp( ) làm ẩn phần tử và . s17deDown( ) làm phần tử hiện trở 
lại. 


Thay đổi đoạn mã trong phần đầu chương để sử dụng hàm . s1ideUp( ) thay 
cho hàm . hide( ): 


$('.removeBtn').each(function(elm) { 
$(this).click(function() { 
$(this).parent().slideUp(); 


}); 


Chú ý Khi đọc tên hàm, đừng nhầm ø bạn có thể chọn trượt các phần 
tử lên hoặc trượt xuống. Hàm . s UB( } luôn làm ẩn các phần tử trong 
khi .s11deDown( ) luôn làm hi háng] 


jQuery UI 


jQuery UI được xây dung dựa trên lõi của jQuery và cung cấp các tính năng mở 
rộng liên quan đến giao diện người dùng. Một số thành phần trong jQuery UI 
cung cấp các widget và hành vi cụ thể, bao gồm widget chọn ngày, hàm tạo hiệu 
ứng accordion và tự động điền theo từ gợi ý (auto-complete). Phần này trình này 
một số tiện ích trong jQuery UI. 


Thông tin bó sung Dé biết thêm thông tin về các tiện ích hiện có trong 
jQuery UI, hãy xem tai http://jqueryui.conv. 


Su dung jQuery UI 


jQuery UI đòi hỏi phái tham chiếu một file JavaScript ngoài vào mã của ban. 
Ban có thé tải file này từ http://jqueryui.con, tai dày ban có thể tải bán dày đủ 
và ổn định hoặc tự lựa chon các thành phần cần thiết cho website. Chương này 
sử dụng bản phát hành đầy đủ của jQuery UI, nhưng với hầu hết các website, 
bạn nên tùy chỉnh gói jQuery UI tải về theo nhu cầu cụ thể sao cho nó chỉ bao 
øồm các thành phần cần thiết cho các hiệu ứng dùng trong website đó. 


jQuery UI được đóng gói trong một file zip chứa cả jQuery lõi và mã jQuery UI 
cùng với các file CSS liên quan tới jQuery UI. Bạn cần giải nén file này vào thu 
muc mà web server có thể truy cập được, như thư mục httpdocs hoặc 
publichtml_. Về cơ bản, các file đó cần được lưu trong cùng thư mục với mã 
JavaScript và HTML mà bạn sử dụng suốt cuốn sách. 


Chú ý Việc sử dung các hàm của jQuery UI tiềm ẩn các vấn đề về khả năng 
truy cập, trừ khi bạn cung cấp cách thức thay thế để thực hiện cùng một tính 


năng. 


Hiệu ứng kéo thả 
jQuery UI cung cấp hai hàm hỗ trợ vié uyén các phần tử bằng cách kéo 
thả, lần lượt là . draggab1e() và . droppab1le( ). Hàm . draggab1e( ) cho 
phép người dùng sử dụng chuột để di chuyển một phần tử bên trong trang web. 
Xem đoạn mã trong Ví dụ 23-3 dưới đây. 


VÍ DU 23-3 Sử dung hàm . draggable(). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Kéo phần tử</title> 

«script type-"text/javascript" data-srcz"jquery-1.4.2.min.js 
«script type-z"text/javascript" data-srcz"js/jquery-ui-1.8.4. 
</script> 

<style type="text/css"> 


#container span { 
border: solid 1px black; 


padding: 3px; 


J 

</style> 

</head> 

<body> 

«div id="container"> 

<span>Kéo tôi đi</span> 

</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$('#container > span').draggable(); 
3); 

</script> 

</body> 

</html> 


Đoạn mã tao một phần tử <p> hỗ trợ tính năng kéo chuột bằng cách goi hàm 
.draggable(): 


$('#container > span').dragge ): 


Chú ý Ví dụ 23-3 giả định rằng I Paa tải Query và các file jQuery UI 
xuống thu mục làm việc hiện hàn 5 thư mục lưu file HTML cho Ví du 


23-3. Khi đó, mã jQuery UI sẽ được tài vào từ thư muc con có tên là js/. 


Thử chạy Ví dụ 23-3 trên một trình duyệt. Bạn sẽ thấy có thể nhấn chuột và kéo 
phần tử <p> ở trên di chuyển xung quanh. 


Bạn có thể sử dụng kết hợp hàm . droppab1e( ) với hàm . draggable( ) để 
tạo đích cho phần tử được kéo, như vậy bạn sẽ có thể thực hiện thao tác kéo thả 
các phần tử ngay trên màn hình. Ví dụ 23-4 mở rộng đoạn mã sử dụng hàm 
.draggable() ở Ví du 23-3 để bổ sung một phần tử «div» làm đích thả. 


VÍ DU 23-4 Sử dụng hàm . droppab1e(). 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head? 

<title>Thả phần tử</title> 


«script type-z"text/javascript" data-srcz"jquery-1.4.2.min. 
«script type-z"text/javascript" data-srcz"js/jquery-ui-1.8. 
«style type="text/css"> 


Zcontainer span { 
border: solid 1px black; 
padding: 3px; 

} 


#targetContainer { 
helght: 200px; 
width: 200px; 
border: solid 1px black; 
background-color: #abacab; 
margin: 50px; 


} 

</style> 

</head> 

<body> 

<div id="container"> 

<span>Kéo và thả tôi</span> 

</div> 

<div id="targetContainer"> 

</div> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('#container > span').draggable(); 

$('#targetContainer').droppable({ 
drop: function(event, ui) { 

alert("Phàn tọ duoc thå: " + ui.draggable. 

} 


}); 

}); 
</script> 
</body> 
</html> 


Điểm màu chốt của đoạn mã là cách sử dung hàm . droppable() với phần tử 
«div» có ID là targetContainer: 


$('#targetContainer').droppab1le({ 
drop: function(event,ui) { 
alert("Phàn tử được thả: " + ui.draggable.te: 


}); 


Hàm .droppable() có thể xử lý một số sự kiện, cho phép ban phán hồi khi 
một phần tử được kéo lên trên phần tử có thé làm đích thả (over), di chuyển ra 
ngoài phần tử có thể làm đích thả (out), khi một phần tử được thả xuống (drop, 
như trong ví dụ) và khi một phần tử được kích hoạt - được chọn hay nhận được 
forcus, hoặc bỏ kích hoạt - bỏ chon hay mất focus (activate và deactivate). 
Xem ví du về các sự kiện này tai http:/jqueryui.com/demos/droppable/. 


Accordion 

jQuery UI hỗ trợ tạo hiệu ứng accordion — hiệu ứng khiến các phần tử cuộn lên 
hoặc cuộn xuống chồng lên nhau. Yếu tố then chốt để tạo hiệu ứng accordion là 
tài liệu HTML phải đúng cú pháp và có bố cục phù hợp. Một ví dụ thường áp 
dụng hiệu ứng accordion là một nhóm các phần tử hay lựa chọn tương tự nhau. 


Ví dụ 23-5 trình bày cách tạo hiệu ú 
JavaScript. 


rdion đơn giản bằng HTML và 


VÍ DỤ 23-5 Hiệu ứng Accordion tå ery. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Accordion</t1itle> 

«script type=”text/Javascript"” data-srcz"jquery-1.4.2.min. 
«script type-z"text/javascript" data-srcz'"js/jquery-ui-1.8. 
«style type="text/css"> 


Zcontainer { 
border: solid 1px black; 
padding: 3px; 

J 

.optionHead { 
border: solid 1px black; 
background-color: #abacab; 


.optionDiv ( 


border-bottom: dotted 1px black; 
} 
</style> 
</head> 
<body> 
<div id="container"> 


<h3 class="opt1onHead">Lựa chon 1</h3> 
«div class="optionDiv" id="option1"> 
<p>Nộ1 dung lua chon 1</p> 

</div> 


<h3 class="opt1onHead">Lựa chon 2</h3> 
«div class="optionDiv" id="option2"> 
<p>Nộ1 dung lua chon 2</p> 

</div> 


<h3 class="opt1onHead">Lựa chon 3«/h3» 
«div class-z"optionDiv" 1d=”opt1on3"”> 
«Nói dung lua chon 3«/p» 

</div> 

</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$('#container ').accordion(); 

}); 

</script> 

</body> 

</html> 


Chay doan må trong Ví du 23-5 trên trinh duyét web sé cho mót trang web nhu 
Hinh 23-1. 


per 
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HÌNH 23-1 Hiệu ứng accordion cơ bản với jQuery. 


Khi tạo accordion với jQuery, bạn sẽ thấy lựa chọn đầu tiên luôn mở sẵn khi 
trang web được tải. Tùy theo nhu cầu về bố cục và cách dùng accordion, bạn có 
thể muốn lựa chọn khác được mở sẵn khi trang web được tải, hoặc tất cả các lựa 
chọn được thu gon tai thời điểm tải. Hàm . accordion() có một số tùy chon để 
điều chỉnh hành vi của nó. Tùy chọn active, khi kết hợp với tùy chọn 
collapsible bằng true sẽ khởi tao accordion trong trạng thái thu gọn hoặc 
với một lựa chọn nào đó được chọn sẵn. 


Trong bài tập tiếp theo, bạn sẽ tạo hiệu ứng accordion cho trang web và thiết lập 
trạng thái mặc định cho hiệu ứng đó. 


Thiết lập trạng thái mặc định cho hiệu ứng accordion 


1. Mở file accordion.html bằng một trình soạn thảo nhu Microsoft Visual 


2. Trong file accordion.html, thê 


Studio hoặc Eclipse. (Bạn có thể tìm thấy file này trong Tài nguyên đi kèm). 


đậm trong đoạn mã sau: 


<!DOCTYPE HTML PUBLIC " 
"http: //www.w3.org/TR/ht 
«html» 

«head» 

<title>Ví dụ về hiệu ứng Accordion</Ztitle> 

«script type-"text/javascript" data-srcz"jquery-1.4.2.min. 
«script type-z"text/javascript" data-srcz"js/jquery-ui-1.8. 
«style type="text/css"> 


TD HTML 4.01//EN" 
1ct.dtd"> 


Ncontainer { 
border: solid 1px black; 
padding: 3px; 


.OoptionHead { 
border: solid 1px black; 
background-color: #abacab; 
} 
.optionDiv { 
border-bottom: dotted 1px black; 
} 


</style> 

</head> 

<body> 

«div id="container"> 


<h3 class="opt1onHead">Lựa chon 1</h3> 
«div class-"optionDiv" 1d=”opt1on1”> 
<p>Nộ1 dung lua chon 1</p> 

</div> 


<h3 class-'optionHead'"»Lua chon 2</h3> 
«div class="optionDiv" id="option2"> 
<p>Nĝi dung lua chon 2</p> 

</div> 


<h3 class-'"optionHead'"»Lua chon 3«/h3» 

«div class-"optionDiv" 1d="”opt1on3”> 

<p>Nộ1 dung lua chon 3</p> 

«/div» 

«/div» 

«script type-"text/java 

$(document).ready(funct 

$('#container’ ).accordi 
collapsible: true, 
active: false 


3): 
3): 
</script> 
</body> 
</html> 


. Lưu file và dùng trinh duyệt mở trang web. Lưu ý rằng hiệu ứng accordion 
xuất hiện trong trạng thái thu gọn, như trong hình sau: 


Im 


AN tp. /locahost/es D * 3 X | B Murim s ASH 


4. Thay đổi giá tri của thuộc tính active thành 2 thay vi false. Đoạn mã sé 
gióng nhu sau: 


$('#container').accordion({ 
collapsible: true, 
active: 2 


3); 


5. Nap lai trang web trong trinh duyệt. Ban sẽ thấy lựa chọn thứ ba trên màn 
hinh xuất hiện với trạng thái được mở rộng. Nguyên nhân là do chỉ số bát 
đầu từ 0, vì vậy lựa chọn thứ nhất (hiển thị là Lựa chọn 1) thực chất có chỉ số 
bằng 0. 


Để tìm hiểu thêm các tùy chọn và sự kiện hiện có trong hàm tạo accordion, hãy 
xem tai http://Jqueryui.com/demos/accordion/. 


Ngoài nội dung được trinh bày tro 
jQuery UI nhu khả năng tao theme SS phức tap để chon các kiểu màu 
đồng bộ cho các hiệu ứng và tiện ích t à trang web. Có nhiều cuốn sách chi 
viết về jQuery UI. Bạn có thể tìm hiểu thêm về theme CSS và jQuery UI tại 
http://jqueryui.com/themeroller/. Ngoài ra, trang web http://jqueryui.com cũng 
có nhiều thông tin và bài hướng dẫn về jQuery UI. 


ày, còn rất nhiều thông tin về 


`" m A 

Bai tàp 

1. Sử dụng đoạn mã trong Ví dụ 23-2 làm cơ sở, thêm một liên kết hoặc một 
button để làm hiển thị lại tất cả các lựa chọn bằng hàm . show( ). 


2. Sử dụng kiến thức ở chương này và các chương trước để tạo hiệu ứng 
accordion bằng jQuery với các tùy chọn được tải qua AJAX. 


ĐÔI NÉT VÉ FPT POLYTECHNIC 

Thành lập tháng 07/2010, FPT Polytechnic thuộc Dai hoc FPT; đào tao Hệ Cao 
dáng thực hành và cấp bằng Cao dáng nghề theo Quyết định của Tống cuc day 
nghề. 


[SỨ MỆNH][4] 


FPT Polytechnic ra đời với sứ mệnh cung cấp dịch 
vụ đào tạo tốt trên các tiêu chí: phù hợp với năng 
lực học tập của sinh viên; đáp ứng nhu cầu lớn của 
doanh nghiệp; và cung cấp dịch vụ đào tạo chuẩn 
mực dựa trên các chuẩn đã được công nhận. 

[Phù hợp với năng lực học tập của sinh viên ][5] 


[Tất cả sinh viên đều có quyền học tập và có quyền được cung cấp một học vấn, 
kỹ năng phù hợp với năng lực. FPT' Polytechnic cung cấp một chương trình học 
tập thiên về thực hành với mục tiê nh viên chăm chỉ, có ý thức học 
hỏi, cầu tiến thì sẽ đáp ứng được nl làm của doanh nghiệp. ][2] 


[Dáp ứng nhu cầu lớn của doanh ng 


[Các chuyên ngành đào tạo của FPT Polytechnic đều nhắm tới nhu cầu xã hội 
lớn. Với nhận định Việt Nam có hàng trăm nghìn doanh nghiệp, mỗi doanh 
nghiệp đều cần có nhân viên kế toán, nhân viên tiếp thị và bán hàng. Các doanh 
nghiệp đều cần có website quảng bá sản phẩm và giao dịch do đó đều cần một 
nhân viên thiết kế, quản tri website. Ngoài ra, doanh nghiệp có hệ thống máy 
tính đều cần nhân viên để xây dựng các ứng dụng hữu ích và đảm bảo hệ thống 
được vận hành hiệu quả. |[2] 


[Cung cấp dịch vụ đào tạo chuẩn mực ][7] 


[Chương trình đào tạo của FPT Polytechnic tuân theo chuẩn khung chương trình 
của BTEC, Vương quốc Anh. Sách giáo trình, tài liệu học tập được chuyển ngữ 
sang Tiếng Việt từ các bộ sách uy tín của các Nhà xuất bản lớn trên thế giới như 
Pearson, Cengage, McGraw-Hill, ... Học liệu được các cán bộ có uy tín của 
Trường Đại học FPT thiết kế, biên tập và chuyển tải trên việc áp dụng hệ thống 
công nghệ thông tin. |[2] 


[TRIÉT LY ĐÀO TẠO ][4] 


FPT Polytechnic áp dụng triết lý đào tạo “Thực học 
— Thực nghiệp” với việc coi người học như là nhân 
viên. Trải nghiệm học tập sẽ được coi như trải 
nghiệm làm việc nhằm giúp cho doanh nghiệp làm 
quen được với công việc thực tiễn và phương pháp 
giải quyết vấn đề dựa trên công việc. Phương pháp 
đào tạo qua dự án "project based training" sẽ đưa 
các yêu cầu thực tế của công việc truyền đạt dưới 
dạng dự án giao cho sinh viên. Việc kỷ luật học tập 
cũng được áp dụng chặt ché cùng với các khóa đào 
tạo kỹ năng mềm nhằm đảm bảo sinh viên ra 
trường có được ý thứ hư kỹ năng mềm 
trong công việc. _ 
[CHIEN LUOC TRONG VIEC P 


GIÁO TRÌNH ][4] 


Hiện nay FPT Polytechnic đã có bản quyền dịch và 
phát hành nhiều bộ sách giáo trình cho các chuyên 
ngành liên quan đến Công nghệ thông tin, Kế toán 
và Quản trị kinh doanh. Ngoài ra, FPT Polytechnic 
cũng đã phát triển các gói học liệu cho các giáo 
trình này. FPT Polytechnic sẵn sàng chia sẻ và cùng 
phát triển giáo trình, tài liệu để cung cấp chất lượng 
đào tạo tốt hơn cho sinh viên Việt Nam. 


['[][photo1]][10] 


[XIN VUI LÒNG LIÊN HỆ ][6] 


[Văn phóng FPT Polytechnic Việt Nam ][6] 


[Địa chi: Tòa nhà FPT Polytechnic, Đường Hàm Nghi, KĐT Mỹ Binh I, Từ 
Liêm, Hà Nội Điện thoại: (04) 7 305 9886 - (04) 7 308 0898 Email: 
caodang@)fpt.edu.vn |[2] 


[Cơ sở tại Hà Nội |[5] 


[Địa chỉ: Tòa nhà FPT Polytechnic, Đường Hàm Nghi, KĐT Mỹ Đình I, Từ 
Liêm, Hà Nội Điện thoại: (04) 8 582 0808 - (04) 6 287 1911 Email: 
caodangfpt.hn(@fpt.edu.vn |[2] 


[Cơ sở tại Đà Nẵng ][5] 


[Địa chỉ: 137 Nguyễn Thị Thập, Phường Hòa Minh, Quận Liên Chiểu, TP. Đà 
Nẵng Điện thoại: (0511) 3 710 999 Email: caodangfpt.dn(@fpt.edu.vn][2] 


[Cơ sở tại Tây Nguyên ][5] 
[Tầng 2 tòa nhà VIB 27 Nguyễn Tã 


Thuột, Tỉnh Đắk Lắk Điện thoại: ( 
caodangfpt.daklak(@fpt.edu.vn |[2] 


hường Tân Lợi, TP. Buồn Ma 
678 Email: 


[Cơ sở tại TP. Hồ Chí Minh ][5] 


[Địa chỉ: 391A Nam Kỳ Khởi Nghĩa, Q. 3, TP. HCM Điện thoại: (08) 3526 8799 
Email: caodangfpt.hcm(@fpt.edu.vn][2] 


Phu luc 


Đáp án bài tập trong chương 


Phu luc này cung cấp đáp án và lời giải cho các bài tập được dua ra trong cuốn 
sách này. Trong nhiều trường hợp, có nhiều hơn một cách giải quyết vấn de. Vi 
vậy, trừ khi cầu hỏi yêu cầu xử lý vấn đề theo cách thức cụ thể, bất cứ giải pháp 
nào cũng được chấp nhận. Lưu ý tên các hàm của bạn có thể sẽ khác với tên 
trong đáp án. 


Chương 1 


1. Sai. Dù chuẩn JavaScript được 
các chuẩn, ECMA Internationa 
tất cả các trình duyệt web. Mức 
giữa các trình duyệt. 


bởi một tổ chức chuyên phát triển 
Script vẫn không được hỗ trợ bởi 
ũng khác biệt (đôi khi rất lớn) 


2. Sai. Có nhiều lý do khiến JavaScript bị vô hiệu hóa trên máy tính của khách 
truy cập website. Trình duyệt của họ không hỗ trợ JavaScript, họ dùng phần 
mềm chuyên dụng nào đó không hỗ trợ JavaScript, hoặc họ đơn thuần muốn 
tắt JavaScript vì lý do cá nhân. Bạn nên cố gắng để website vẫn hoạt động 
khi không có JavaScript. 


3. Một khối lệnh định nghĩa JavaScript về cơ bản giống như sau: 


«script type-"text/javascript'» 
// Viết má JavaScript ở đây 
</script> 


4. Sai. Phiên bàn JavaScript không dugc khai báo trong dinh nghia DOCTYPE. 
Trên thực tế, chúng ta không mấy khi khai báo phiên bản JavaScript sẽ dùng. 
Đúng. Mã JavaScript có thể xuất hiện ở cả khối <head> và khối <body> của 
một tài liệu HTML. 


Chương 2 


1. Đoạn mã trong trang mysecondpage.htm sé tương tự nhu sau, dù trang của 
bạn có thể sẽ khác một chút (và dĩ nhiên nó sẽ chứa tên bạn thay vì tên tác 
giảl): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Trang web thứ hai của tôi</title> 

«script type-"text/javascript'» 

alert("Steve Suehring"); 

</script> 

</head> 

<body> 

<p>Trang web thứ hai của tôi</p> 

</body> 
</html> 


2. Dưới đây là đoạn mã mới với ji được in đậm: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Trang web thứ hai của tôi</title> 
«script type-"text/javascript'» 
function callAlert() ( 
alert("Steve Suehring"); 


</script> 

</head> 

<body> 

<script type="text/javascript"> 
callAlert(); 

</script> 

<p>Trang web thứ hai của tôi</p> 
</body> 

</html> 


3. Tao một file có tên là 3.htm và một file có tên là 3.js có nội dung nhu dưới 
đây. (Đoạn tham chiếu trong file 3.htm tới file 3.js được in đậm). 


3.js: 


function callAlert() ( 
alert("Steve Suehring"); 
} 


3.htm: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Trang web thứ hai của tôi</title> 

«script type-"text/javascript" data-srcz"3.js"» </script> 
</head> 

<body> 

«script type="text/Javascrảa 
callAlert(); 
</script> 
<p>Trang web thü hai cù 
</body> 
</html> 


ns 


Chuong 3 


1. Các câu lệnh đúng là a, b, c và d. Câu lệnh sai duy nhất là e vì câu lệnh này 
sử dụng một từ khóa, case, làm tên biến. 


2. Sai. Không phải tất cả câu lệnh JavaScript đều phải kết thúc bằng dấu chấm 
phãy. Trên thực tế, dấu chấm phẩy thường không bắt buộc. 


3. Biến orderTota1 bi thay đổi sau khi người dùng nhận được hộp thoại 
thông báo số lượng hàng đã đặt, nhưng trước giá trị trả về của hàm. Bài học 
ở đây là bạn không được tùy tiện thay dói giá trị hoặc nội dung của biến. 
Người dùng muốn đặt một số lượng hàng nhất định, nhưng đoạn mã đã thay 
đổi số lượng đó sau khi thông báo cho người dùng chính xác số lượng hàng 


được đặt! 


Chương 4 


1. Khai báo biến: 


var first = 120; 
var second = "5150"; 
var third = "Hai trăm ba mươi”; 


2. Mảng (các giá trị của ban có thể khác, nhung cần chú trong kiểu dữ liệu và 
cü pháp): 


var newArray - new Array(10, 20, 30, "chuoi thu nhat", "cl 


3. Chuói dà thém ky tu thoát: 


alert("Phán ứng của Steve 


\"dễẫ. thuong! N""); 


4. Đây là bài tập mở rộng, không Tới giả ụ thể, 


Chương 5 


1. Các hộp thoại thông báo (giá trị của bạn có thể khác, nhưng cần chú trọng 
kiểu dữ liệu và cú pháp): 


var 
var 
var 
var 
var 
var 


num1 = 1; 

num2 = 1; 

num3 = 19; 
fourthvar - "84"; 
name1 = "Jakob"; 
name2 - "Edward"; 


alert(num1 + num2); 
alert(num3 + fourthvar); 
alert(name1 + name2); 


2. Toán tử chèn sau: 


var theNum - 1; 
alert(theNum); 
alert(theNum++) ; 
alert( theNunm) ; 


Toán tử chèn trước: 


var theNum = 1; 
alert(theNum); 
alert(++theNum) ; 
alert(theNum); 


3. Doan má nhu sau: 


var numi = 1; 
var num2 - 1; 
var num3 = 19; 
var fourthvar = "84"; 
var name1 - "Jakob"; 
var name2 = "Edward"; 


alert(typeof nu 
alert(typeof nu 
alert(typeof nu 
alert(typeof fo 
alert(typeof namei); 
alert(typeof name2); 


Đoạn mã này sé hiển thi ba hộp thoại thông báo với tir number, theo sau là ba 
hộp thoai khác với từ string. 


1. Sai. Các toán tử một ngôi xuất hiện khá thường xuyên trong JavaScript, đặc 
biệt trong vòng lặp for, biến đếm được tăng giá trị bằng toán tử ++ chèn 
sau. 


2. Sai. Dù việc tiết kiệm một vài byte có thể có ích, đặc biệt cho ứng dung web, 
giải pháp được ưu tiên hơn vẫn là tận dụng vài byte đó dé mã dễ đọc và dé 
bảo trì hơn. Tuy nhiên, phần lớn đây là vấn đề của thói quen và chuẩn lập 
trình. Trong phần sau, bạn sẽ được làm quen với jQuery. Phiên bản "thu nhỏ" 
của thư viện jQuery là một ví dụ cho việc tiết kiệm kích cỡ hết mức. 


Chuong 6 


1. Thay thé YOUR NAME trong đoạn mã sau bằng nội dung thích hợp: 


var inputName = prompt("Vui lòng nhập tên của bạn: "); 
switch(inputName) { 
case "YOUR NAME": 
alert("Chào mừng " + inputName); 
break; 
case "Steve": 
alert("bi di"); 
break; 
default: 
alert("Vui lòng trở lai sau, " + inputNamc 


j 


2. Doan má nhu sau: 


var temp = prompt("Nháp 
if (temp » 100) ( 
alert("Vui lòng 
) else if (temp « 20) { 
alert( "Hãy tăng nhiệt độ lén!"); 
} 


Luu y sé là mót ý tuóng không tôi khi dua ra hành dóng mác dinh trong 
trường hợp nhiệt độ nằm trong khoảng từ 20 đến 100! 


Ô hiện tai:"); 


ệt đội”); 


3. Bài tập này thực chất không thể thực hiện được như yêu cầu. Vi toán tử ba 
ngôi chỉ chấp nhận một điều kiện kiểm tra duy nhất, trong khi bài tập 2 yêu 
cầu hai điều kiện. Do đó, toán tử ba ngôi không thể thực hiện chính xác yêu 
cầu đó. Đoạn mã sau tạo hộp thoại thông báo yêu cầu người dùng giảm nhiệt 
độ khi nhiệt độ cao hơn 100 và tăng nhiệt độ khi nhiệt độ thấp hơn hoặc bằng 
100. 


var temp = prompt( "Nhập vào nhiệt độ hiện tai:"); 
temp > 100 2 alert( "Hãy giảm nhiệt độ”) : alert( "Hãy tăng 


4. Đoạn mã như sau: 


for (var i = 1; i < 101; i++) { 
if (i == 99) ( 
alert("Giá tri số là " + i); 
} 


} 


Lưu ý: Vì biến i bát đầu từ 1 (trong câu lệnh for), biến đếm này cần tăng 
đến 101 để đạt yêu cầu đếm từ 1 đến 100. 


5. Đoạn mã như sau: 


var 1 = 1; 
while (1 < 101) { 
1f (1 == 99) { 
alert("Giá trị số là " + 1); 
j 
1++; 


} 


Chú ý việc đặt toán tử tăng chèn sau 
dụng i-i-1, nhưng toán tử chèn s 


jen i trong vòng lặp. Ban có thể sử 
ược ưa dùng hơn. 


Chương 7 


1. Lưu ý rằng đoạn mã này dùng hàm isNaN để kiểm tra xem giá trị đầu vào có 
phải là số hay không. Cách lập trình này rất hay nhưng không phải lúc nào 
cũng được sử dụng. Cách làm khác cũng cho ra kết quả tương tự là sử dụng 
câu lệnh return theNumber++ thay cho câu lệnh cuối cùng. Đoạn mã nhu 
sau. 


<head> 
<title>Chương 7 Bài tập 1</title> 
<script type = "text/javascript" > 
function incrementNum(theNumber) { 
if (isNaN(theNumber)) { 
alert("Xin lỗi, " + theNumber + " không pl 
return; 


return theNumber + 1; 


</script> 

</head> 

<body> 

<script type = "text/javascript" > 
alert(incrementNum(3)); 

</script> 

</body> 


. Doan må nhu sau: 


function addNums(firstNum,secondNum) { 


if ((isNaN(firstNum)) || (isNaN(secondNum))) { 
alert("Xin lỗi, cả hai đối số đều phái là 
return; 


else 1f (firstNum > secondNum) { 
alert(firstNum + "lớn hơn ” + secondNum); 
} 


else { 


return fir um + secondNum; 
} 


} 


. Muc dích cüa bài tâp này là chi pham vi của biến. Chú ý giá trị của 
biến result thay đổi nhu thế nào bên ngoài hàm — dù thay đổi chỉ được 
thực hiện bên trong hàm. Hai câu lệnh hiển thị hộp thoại thông báo được in 
đậm trong đoạn mã: 


function addNumbers() { 
firstNum = 4; 
secondNum = 8; 
result = firstNum + secondNum; 
return result; 


result = 0; 
alert(result); 

result = addNumbers(); 
alert(result); 


. Đoạn mã nhu sau: 


<head> 
<title>Chương 7 Bài tập 4</title> 


«script type-"text/javascript'» 
var stars = ["Polaris","Aldebaran","Deneb"," "Vega", "Altair' 
"Dubhe", "Regulus": 
var constells = ["Ursa Minor”, "Taurus”, "Cygnus", "Lyra" , "Ac 
"Ursa Major","Leo' 
function searchStars(star) ( 
var starLength - stars.length; 
for (var i = 0; i < starLength; i++) { 
if (stars[i] == star) { 
return constells[i]; 


J 
} 
return "Không tìm thấy sao ” + star; 
</script> 
</head> 
<body> 
<script type = "text/javascript" > 


var inputStar = prompt("Nhâp tên ngôi sao: "); 


alert(searchStars(inputS 


</script> 
<p>Danh sách các ngôi s 
</body> 


Chuong 8 


1. Doan má nhu sau: 


var star - ["Polaris", "Deneb", "Vega", "Altair"]; 

var starLength - star.length; 

for (var i = 0; 1 < starLength; i++) { 
alert(star[i]); 

} 


2. Đây là một cách giải: 


function Song(artist,length,title) { 
this.artist - artist; 
this.length - length; 
this.title - title; 


j 


song1 = new Song("Nghé sĩ thứ nhát","3:30","Tén bài hát tl 
song2 = new Song("Nghé sĩ thứ hai","4:11","Tén bài hát thị 
song3 = new Song("Nghé sĩ thứ ba","2:12","Tén bài hát thứ 


3. Giá dinh ban đang dùng đoạn mã cho sẵn, đoạn má trong phần thân nối tên 
tất cả đối tượng vào một chuỗi, như sau: 


var names = new Array; 
for (var propt in star) { 
names += propt; 


alert(names); 
Đoạn mã để phân tách tên các đối tượng bằng dấu phẩy sẽ nhu sau: 


var names = new Array; 
for (var propt in star) ( 
if (names !- "") ( 
namesøh= "," + propt; 


) else ( 


j 


alert(names); 


n pt; 


Chuong 9 


1. Doan má nhu sau: 


if (screen.availHeight « 768) ( 


alert("Chiéu cao khả dung: " + screen.availHeight: 
} 
if (screen.availWidth < 1024) { 

alert("Chiéu róng khá dung: " + screen.availWidth: 
} 


2. Đoạn mã hoàn chỉnh được đưa ra dưới đây, bao gồm cả đoạn mã trong bài 
tập. Phần mã thêm vào được in đậm. Lưu ý cách sử dung hàm unescape( ) 
để loai bỏ ký tự mã hóa %20 (ky tự trống) theo kiểu URL khỏi tên quốc gia. 


Điều này là cần thiết vi tên quốc gia trong bài tập này phải được giải mã khỏi 
định dang URL để được xử lý trong yêu cầu HTTP GET. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 
«html» 
«head» 
<title>Location, Location, Locationc/title-» 
</head> 
<body> 
<script type="text/javascript"> 
var body = document.getElementsByTagName(' 
for (var prop in location) { 
var elem = document.createElementt 
var text = document.createTextNodc 
elem.appendChild(text); 
body.appendChild(elem); 


if (location.search) ( 
erystring - location.search. 
its = querystring.split('& 
i = 0; 1 < splits.length, 
var splitpair - splits[i]. 
var elem = document.creatc 
var text = document.creatc 
if (splitpair[0] == "count 
switch(unescape(s[ 
case "Bra: 
a- 
bi 
case "Gre: 
a- 
bi 


j 


} 
elem.appendChild(text); 
body.appendChild(elem); 


} 

</script> 
</body> 
</html> 


3. Bài tập này không có lời giải cụ thé. Ban có thé cài đặt User Agent Switcher 
để hoàn thành bài tập này. 


Chuong 10 


1. Doan má nhu sau: 


var newelement = document.createElement("p"); 
newelement.setAttribute("id","pelement"); 
document.body.appendChild(newelement); 
newelement.appendChild(document.createTextNode( 
"Dáy là mót doan ván bán, dü ngán.")); 
var anchorelem - document.createElement("a"); 
anchorelem. setAttr1bute( "1d", "aelement”); 
anchorelem.setAttribute("href","http://www.braingia.org/": 
document.body.appendChild(anchorelem); 
anchorelem.appendChild(doc nt.createTextNode( 
"Di tói website ve Suehring.")); 


2. Doan má nhu sau: 


'// tạo các phần tử ban dáü"(néu ban sử dụng một file HTMI 
var newelement = document.createElement("p"); 
newelement.setAttribute("id","pelement"); 
document.body.appendChild(newelement); 
newelement.appendChild(document.createTextNode( 

"Đây là một đoạn văn bán, dù ngán.")); 
var anchorelem = document.createElement("a"); 
anchorelem.setAttribute("id","aelement"); 
anchorelem.setAttribute("href","http://www.braingia.org/": 
document.body.appendChild(anchorelem); 
anchorelem.appendChild(document.createTextNode("Nhán vào « 
// thuc hién thay dói 
var existingp - document.getElementById("pelement"); 
existingp.firstChild.nodeValue-"báy là văn bản mói."; 
var newanchor = document.getElementById("aelement"); 
newanchor.setAttribute("href","http://www.microsoft.com/": 


3. Doan má nhu sau: 


«head» 
«title» Bài táp Chuong 10 «/title» 


</script> 

</head> 

<body> 

<div id="thetable"></div> 

<script type = "text/javascript" > 


var table = document.createElement("table"); 
table.border = "1"; 
var tbody = document.createElement("tbody"); 
// Nối thêm phần body vào bảng 
table.appendChild(tbody); 
var row - document.createElement("tr"); 
// Tao các dóng trong báng 
for (i = 1; i < 3; i++) ( 
var row = document.createElement("tr"); 
// Tao các côt/td 
for (j = 1; j < 3; j++) 1 
// Chèn dữ liệu thực từ tài liệu XML 


var td = ent.createElement("td"); 

var dat ent.createTextNode("Xin cl 
+ 1t ", CDt +j) 

td.appe ata); 

row.appen d(td); 


} 

tbody.appendChild(row); 
J 
document.getElementById("thetable").appendChild(table); 
</script> 
</body> 


Chương 11 


1. Doan má nhu sau: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>0ncl1ck</t1itle> 


«script type-"text/javascript'» 

function handleclick() { 
alert("Ban đã nhấn chuột vào đây"); 
return false; 

} 

</script> 

</head> 

<body> 

<p><a href="#" onclick="return handleclick();">Nhãn vào dé 

</body> 

</html> 


. Doan må nhu sau: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>0ncl1ck</title> 

«script type="text/Javascrảa 

«script type-"text/java 

function handleclick() 
alert("Ban đã n 
return false; 


" data-srcz'ehandler.js'»«/s« 


vào đây”); 


</script> 

</head> 

<body> 

<p><a href="#" id="clickMe">Nhn vào dáy«/a»«/p» 

«script type="text/javascript"> 

var aLink = document.getElementById("clickMe"); 
EHandler.add(aLink, "click", function() { handleclick(); . 
</script> 

</body> 

</html> 


. Bài tâp này không cân dùng JavaScript. Doan mà HTML sé gióng nhu sau: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«title2»Tab mới</title> 


</head> 

<body> 

<p><a target="MiIcrosoft” href="http: //www.m1crosoft. com” 
</body> 

</html> 


Chương 12 


1. Đây là biến thể của một ví du trong chương này: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 

<title>Xin chào Cookiec/title» 
«script type = "text/javascript'"» 
var cookName = "cookie1"; 

var cookVal - "testvalue 


var date - new Date(); 

date.setTime(date.getTi di 930000); // một ngày, tính 1 
var expireDate = date.tot ing(); 

var myCookie = cookName + “#” + cookVal + ";expires=” + e 
document.cookie - myCookie; 

</script> 

</head> 

<body> 

<p>Xin chào</p> 

</body> 

</html> 


2. Đoạn mã này vê cơ bán giống với đoạn mã trong Bài tập 1, một vài thay đổi 
được in đậm: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 


«html» 

«head» 

<title>Xin chào Cookiec/title» 
«script type = "text/javascript'"» 


var cookName - "cookie2"; 


var cookVal = "testvalue"”; 
var date - new Date(); 
date.setTime(date.getTime()-86400000); // một ngày, tính 1 
var expireDate - date.toGMTString(); 
var myCookie - 
cookName + "=" + cookVal + ";expires-" + expireDal 
document.cookie - myCookie; 
</script> 
</head> 
<body> 
<p>Xin chào</p> 
</body> 
</html> 


. Trừ khi bạn dang sử dụng một kết nối dang Secure Sockets Layer (SSL), nếu 
không, bạn sẽ không thể doc cookie có cờ secure. 


. Bài tập 1 có sử dụng một cookie tên là cookie1; vì vậy, bài tập này sẽ chỉ 
hiển thị thông tin của cookie đó. Đoạn mã như sau: 


<!DOCTYPE HTML PUBLIC " DTD HTML 4.01//EN" 


"http: //www.w3.org/TR/h trict.dtd"» 
«html» 

«head» 

«title»Boc Cookie</title> 

«script type = "text/javascript'"» 


var incCookies - document.cookie.split(";"); 
for (var c = 0; c « incCookies.length; c++) ( 
var splitCookies = incCookies[c].split("z"); 
if (splitCookies[0] == "cookie1") { 
alert(incCookies[c]); 
} 
} 


</script> 
</head> 

<body> 

<p>Xin chào</p> 
</body> 

</html> 


Chuong 13 


1. Tham kháo Ví du 13-2 dé thuc hién bài táp này. 


2. Tham khảo Ví du 13-2 để thực hiện việc tải trước ảnh. Ban có thể sử dung 
cùng đoạn mã đó cho bản đồ ảnh bạn thực hiện trong bài tập này. 


Chương 14 


1. Thao khảo phần “Làm việc với các Select Box ” trong Chương 11 để thực 


hiện bài tập này. 


2. Dựa trên ví dụ pizza.htm, phần <head> của đoạn mã sẽ giống như sau với 
phần thay đối được in đậm: 


<head> 


<title>P1zza</t 
<script type 
function prepza() 


var 
var 
var 
var 
var 
var 


ascript"> 

checkboxes = document.forms["pizzaforr 
crusttype = document.forms["pizzaform' 
size = document. forms[ ”p1zzaform”]. s1: 
crustlength = crusttype. length; 
sizelength = crusttype.length; 
newelement = document.createElement("[ 


newelement. setAttr1bute( “1d”, "orderheadint 
document.body.appendChild(newelement); 
newelement.appendChild(document.createTexl 


for 


"Chiéc bánh pizza này sé có:")); 
(var c = 0; c < crustlength; c++) { 
1f (crusttype[c].checked) { 
var newelement = document. 
newelement.setAttribute(": 
document.body.appendChild| 
newelement.appendChild (doc 
"Dé bánh: " +crust 


} 
for (var s = 0; s < sizelength; s++) { 
if (size[s].checked) { 
var newelement = document, 
newelement.setAttribute(": 
document.body.appendChildi 
newelement.appendChild(do« 
"Cỡ " + size[s].v: 
} 
} 
for (var i = 0; i < checkboxes; i++) { 
if (document.form: 
var newel‹ 


newelemen!l 
document.I 
newelemen!l 
dc 
} 
} 
} 
</script> 
</head> 
Doan HTML có dang nhu sau. này sử dung một bảng có ba cột, 


lưu ý rằng đây không phải cách làm duy nhất. Phần thêm vào được in đậm: 


«form id-z"pizzaform" action="#"> 

«table» 

<tr><td>Thành phàn«/td»«td»Bé bánh«/td»«td»Kích thước</td: 

«tr» 

<td><input type="checkbox" id-"toppingi1" value="Xúc xích 1 
name-"toppingcheck"/»Xüc xích thường</Ztd> 

<td><input type="radio" name="crust” value="”Bình thường” 
checked="checked" id-'"radioi1"/»Binh thường</td> 

<td><input type="radio" name="size" value-"Nhó" checked="‹ 
1d="rad1os1ze1"/Z>Nhỏ</td> 

</tr> 

<tr> 

<td><input type="checkbox" id-"topping2" value="Xúc xích ` 
name-"toppingcheck"/»Xüc xích Y«/td» 

<td><input type="radio" name="crust” value-z"Dày" 1d="radic 

<td><input type="radio" name="s1ze"” value="Trung bình” 
id-"radiosize2" />Trung bình</td> 


«/tr» 

«tr» 

<td><input type="checkbox" id-z"topping3" value="Dăm bóng" 
name-"toppingcheck" />Dăm bông</Ztd> 

<td><input type="radio" name-"crust" value="Mỏng" 1d="rad: 

<td><input type="radio" name="”"s1ze" value-"Lón" id-'radio: 

</tr> 

<tr> 

<td><input type="checkbox" id-"topping4" value="Hạt tiêu › 
name=”"topp1ngcheck"/>Hạt tiêu xanh</td> 

<td></td> 

<td></td> 

</tr> 

<tr> 

<td><input type="checkbox" id="topping5" va1ue="Nấm" 

<td></td> 

<td></td> 

</tr> 

<tr> 

<td><input type=”checkbox2 
name-"toppingch 

<td></td> 

<td></td> 

</tr> 

<tr> 

<td><input type="checkbox" 1d="topping7” val1ue="Dứa” 

<td></td> 

<td></td> 

</tr> 

</table> 

<p><input type="submit" id="prepBtn" name="prepBtn" 

</form> 


="topping6" value="Hành" 
ành</td> 


3. Thêm đoạn mã sau vào phân <head> của ứng dung pizza trong bài tập trước: 


function flip(pizzatype) { 

if (pizzatype -- "veggiespecial") ( 
document.getElementById("peppers").checkec 
document.getElementById("onions").checked 
document.getElementById("mushrooms").checl 

) else if (pizzatype -- "meatspecial") ( 
document.getElementById("sausage").checke« 
document.getElementById("pepperoni").chec! 


document.getElementById("ham").checked 
) else if (pizzatype == "hawaiian") ( 

document.getElementById("ham").checked = ' 

document.getElementById("pineapple").chec! 


} 


Sử dung form HTML sau. (Lưu ý phần thêm ba button và phần thay đổi 
thuộc tính id của mỗi thành phần). 


«form id-z"pizzaform" action="#"> 


«input type="button" id-"veggiespecial"name-'veggiespecia. 
value-"Rau dác biét" /» 

«input type="button" id-"meatspecial" name-z"meatspecial" 
value-"Thit dác biét " /» 

«input type="button" id-"hawaiian" name-z"hawaiian" value=' 

«table» 

<tr><td>Thành phần</td><td>Bế bánh</Ztd><td>Kích thước</td: 

<tr> 

<td><input type="”checkb 
name-"toppingch 


ausage" value=”"Xúc xích tl 

c xích thuóng«c/td» 

<td><input type="radio" ust" value="Bình thường” 
checked="checked radio1" />Bình thuòng</td> 

<td><input type="radio" name="size" value="Nhỏ" 

</tr> 

<tr> 

<td><input type="checkbox" id="pepperoni" value="Xúc xích 
name-"toppingcheck" />Xúc xích Y«/td» 

<td><input type="radio" name="crust" value="Dày" 1d="radic 

<td><input type="radio" name="size" value="Trung bình" 
id-"radiosize2" />Trung bình</td> 

</tr> 

<tr> 

<td><input type="checkbox" id="ham" value="Dăm bông" 
name="toppingcheck" />Dăm bông</td> 

<td><input type="radio" name="crust" value="Mông" id="rad: 

<td><input type="radio" name="size" value="Lón" id-'radio: 

</tr> 

<tr> 

<td><input type="checkbox" id="peppers" value="Hąt tiêu xé 
name="toppingcheck"/>Hąt tiêu xanh</td> 

<td></td> 


<td></td> 

</tr> 

<tr> 

<td><input type="checkbox" id-z"mushrooms" va1ue="Nấm" 
name-"toppingcheck"/»Nám«/td» 

<td></td> 

<td></td> 

</tr> 

<tr> 

<td><input type="checkbox" id-z"onions" value-z"Hành" 
name-"toppingcheck" /»Hành«/td» 

<td></td> 

<td></td> 

</tr> 

<tr> 

<td><input type="checkbox" id-"pineapple" value="Dứa " 
name=”topp1ngcheck”/Z>Dứa</td> 

<td></td> 

<td></td> 

</tr> 

</table> 


«input type="submit" id 
value-"Chuán bi P 
«/form» 


" name=”prepBtn” 
onclick-"prepza();" /» 


Thêm các hàm xử ly sự kiện vào đoạn mã JavaScript trong phần 
<body> của trang web: 


var veggieBtn = document.getElementById("veggiespecial"); 
EHandler.add(veggieBtn,"click",function() { flip("veggies| 
var meatBtn = document.getElementById("meatspecial"); 

EHandler .add(meatBtn, "click",function() { flip("meatspeci: 
var hawaiiBtn = document.getElementById("hawaiispecial"); 
EHandler.add(hawaiiBtn,"click",function() { flip("hawaiiar 


Chuong 15 


1. Đây là một trang ví du; có nhiều cách để thực hiện bài tập này: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1Itle>CSS</title> 

«link href=”"exercise1.css" rel="stylesheet" type="text/cs: 
</head> 

<body> 

<h1 id="h1element">Tiêu đề</h1> 

«p id-"firstelement"»Phàn tử thứ nhất</p> 

«p id="secondelement">Phần tử thứ ha1</p> 

</body> 

</html> 


Sau đây là file style shee exercise1.css: 


#h1element { 
background-color: #abacab; 


} 


firstelement 


color: red; 


} 


secondelement { 


color: blue; 


} 


2. Đoạn mã này thay đổi phần tử có tên f7rste1ement để phần tử đó có font 
chữ màu xanh dương: 


«script type-"text/javascript'» 

var elementi - document.getElementById("firstelement"); 
elementi.style.color = "#0000FF"; 

</script> 


3. Đoạn mã này ẩn tất cả phần tử <p> bằng thuộc tính visibility của CSS: 


«script type-"text/javascript'» 

var pelements = document.getElementsByTagName("p"); 

var pelmLength - pelements.length; 

for (var 1 = 0; 1 < pelmLength; 1++) { 
pelements[i].style.visibility - "hidden"; 


</script> 


4. Doan mã này cho thấy thuộc tính hiên thi (visibility) trước và sau khi bi 
thay đổi trong đoạn mã. Khi chạy đoạn mã, ban sẽ thấy thông báo trống 
trước khi thuộc tính được thiết lập giá trị. 


«script type-"text/javascript'» 

var pelements = document.getElementsByTagName("p"); 

var pelmLength - pelements.length; 

for (var 1 = 0; 1 < pelmLength; 1++) { 
alert(pelements[i].style.visibility); 
pelements[i].style.visibility - "hidden"; 
alert(pelements[i].style.visibility); 


</script> 


Chuong 16 


1. Ví dụ 16-3 là một cách giải cho bài tập này. 


2. Hộp thoai thông báo alert cung cấp phán hồi trực quan và cũng là lời giải 
cho bài tập này. Sau đây là cách giải cơ bản cho bài tập này. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Try/Catch</title> 

«script type-"text/javascript'» 

</script> 

</head> 

<body> 

<form name="formexample" id="formexample" action="#"> 
<div id="citydiv">Nhâp tên mót thành phó: «input id="city' 


<d1v><input 1d="submit” type="subm1t”></d1v> 
</form> 
«script type="text/javascript"> 
function checkValid() { 
try { 
var cityField = document.forms[O]["city"], 
if (cityField.value != "Stockholm") { 
throw "Không phåi là Stockholm"; 
} 


catch(errorObject) { 
alert(errorObject); 
} 
J 


function init() { 
document.forms[0O0].onsubmit = function() ( return « 


window.onload - init; 
</script> 

</body> 

</html> 


. Đây là một cách giải cho bài tà 
có cách düng file ehandler.js: 


ó những cách giải khác trong đó 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Try/Catch</title> 

«script type-"text/javascript'» 

</script> 

</head> 

<body> 

<form name="formexample" id="formexample" action="#"> 
<div id="citydiv">Nhâp một số trong khoáng từ 1 đến 100: 
«input id-"num" name=”num”></d1v> 

<d1v><input 1d="submit” typez'"submit"»«/div» 

</form> 

«script type="text/javascript"> 

function checkValid() { 


try { 
var numField = document.forms[0]["num"]; 


if (isNaN(numField.value)) { 
throw "Không phái số"; 


} 

if ((numField.value > 100) || (numField.v: 
numField.style.background = ”#FF0( 
return false; 


} 

else { 
numField.style.background = ”#FFFt 
return true; 

} 


} 
catch(errorObject) { 


alert(errorObject); 


} 
finally { 

alert("Cåm on bạn dà tham gia."); 
} 


} 

function init() { 
document. forms[ 

J 


window.onload - init; 
</script> 

</body> 

</html> 


it = function() { return « 


Chương 17 


1. Bài giải này dùng lại hai file books.htm và books.xml trong Chương 17 và 
chỉ thay đối file books.htm. Các thay đối được in đậm. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«script type-z"text/javascript" data-srcz'"ehandler.js'»«/s« 
<t1tle>Books</Zt1tle> 

</head> 

<body> 


«div id-"xmldata"»«/div» 
<p><a href="#" id="displaytable">Hiển thi bảng</a></p> 
«script type-"text/javascript'» 
function displayData() ( 
var xmlEl = docObj.getElementsByTagName ("book"); 
var table - document.createElement("table"); 
table.border - "1"; 
var tbody - document.createElement("tbody"); 
// Nối thêm phần thân vào bảng 
table.appendChild(tbody); 
var row - document.createElement("tr"); 
for (colHead = 0; colHead < xmlEl[0].childNodes.l: 
if (xmlEl[0].childNodes[colHead].nodeType 
continue; 


var tableHead 
var colName - 


- document.createElement("tl 
document.createTextNode( 

xmlEl[0].childNodes[colHe: 
tableHead.appendChild(colName); 
row.appendchidd (tableHead); 


} 
tbody.appendChi 


for (1= 0; 1<x P.length; i++) { 
var row = document.createElement("tr"); 
// Tao cót cho báng /td 
for (j = 0; j < xmlEl[i].childNodes.length; j++) 4 
// Bỏ qua nếu kiểu không phái là 1 
if (xmlEl[i].childNodes[j].nodeType !- 1) 
continue; 


// Chèn văn bản/dữ liệu thuc từ tài liệu ? 
var td = document.createElement( "1 
var xmlData - document.createText! 

xmlEl[i].: 
td.appendChild(xmlData); 
row.appendChild(td); 

} 

tbody.appendChild(row); 


} 
document.getElementById("xmldata").appendChild(tal 


function getXML() 
{ 
tablelink.style.visibility = "hidden"; 
if (typeof document.implementation.createDocument 


docObj = document.implementation.createDo: 
docObj.onload = displayData; 


else if (window.ActiveXObject) 
{ 
docObj = new ActiveXObject("Microsoft.XMLI 
docObj.onreadystatechange - function () { 
if (docObj.readyState == 4) displ: 
3 


} 
docObj.load("books.xml"); 


var tablelink - document.getElementById("displaytable"); 
EHandler.add("tablelink","click",function() { getXML(); }, 
</script> 
</body> 
</html> 


Mö rông: Doan má sau thêm lié ién thi bång" dé khi bảng hiên 
thi, sẽ có một liên kết "Ẩn bảng". Đây không phải là yêu cầu của bài tập. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

«script type-z"text/javascript" data-src="ehandler. Js"></s( 

<t1tle>Books</Zt1tle> 

</head> 

<body> 

<div id="xmldata"></div> 

<p><a href="#" id="displaytable">Hiển thi bång</a></p> 

«script type="text/javascript"> 

function displayData() { 
var xmIEl = doc0Obj .getElementsByTagName ("book"); 
var table = document.createElement("table"); 
table.setAttribute("id","bookstable"); 
table.border = "1"; 


var tbody - document.createElement("tbody"); 
// Nói thém phàn body vào báng 
table.appendChild(tbody); 
var row - document.createElement("tr"); 
for (colHead = 0; colHead < xmlEl[0].childNodes.l: 
if (xmlEl[0].childNodes[colHead].nodeType 
continue; 


= document.createElement("tl 
document.createTextNode( 
xmlEl[0].childNode 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


var tableHead 
var colName - 


} 
tbody.appendChild(row); 
// Tao dóng trong báng 
for (i = 0; 1 < xmlEl.length; i++) { 

var row = document.createElement("tr"); 

// Tao các cót cho báng/td 

for (j - W< xmlEl[i].childNodes.lengt! 
a nếu kiểu không phải là : 
l[i].childNodes[j].nodeTyj 
continue; 


J 
// Chèn văn bản/dữ liệu thực từ ti 
var td = document.createElement( "t1 
var xmlData = document.createText! 
xmlEl[i].: 
td.appendChild(xmlData); 
row.appendChild(td); 


} 
tbody.appendChild(row); 


var tableanchor = document.createElement("a"); 
var tableanchortext = document.createTextNode( "Ân 
tableanchor.setAttribute("id","hidetable"); 
tableanchor.setAttribute("href","4Z"); 
tableanchor.appendChild(tableanchortext); 
if (typeof window.addEventListener !- "undefined". 
tableanchor.addEventListener("click",hide^ 
) else ( 
tableanchor.attachEvent("onclick",hideTab. 


} 
document.getElementById("xmldata").appendChild(tableanchoi: 


document.getElementById("xmldata").appendChild(table);** 


j 

function hideTable() 1 

var bookstable = document.getElementById(" bookstable"); 
bookstable.style.display = "none"; 

tablelink.style.display = ""; 

var tableanchor = document.getElementBylId("hidetable"); 
tableanchor.style.display = "none"; 

j 

function getXML() 


tablelink.style.display = "none"; 

if (typeof document.implementation.createDocument != "undefined") 
{ 

docObj = document.implementation.createDocument("", "", null); 
docObj.onload - displayData; 
} 

else if (window.ActiveXObject 
{ 

docObj = new ActiveXObject("Microsoft. XMLDOM"); 
docObj.onreadystatechange - function () 1 

if (docObj.readyState == 4) displayData() 

i 

} 

docObj.load("books.xml"); 


var tablelink = document.getElementBylId("displaytable"); 
EHandler.add( "tablelink","click",function() { getXML(); 3); 
</script> 

</body> 

</html> 


. Cách giải này cũng cần đến file books.xml. Đoạn mã này gần giống đoạn mã 
hoàn chỉnh cho file books.htm trong Chương 17, các phần thay đổi được in 
đậm: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 


"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<t1tle>Books</Zt1tle> 

</head> 

<body> 

<div id="xmldata"></div> 

«script type="text/javascript"> 

window.onload = getXML; 

function displayData() { 
var xmlEl = docObj.getElementsByTagName ("book"); 
var table = document.createElement("table"); 
table.border = "1"; 
var tbody = document.createElement("tbody"); 
// Nối thêm phần body vào bảng 
table.appendChild(tbody); 
var row - document.createElement("tr"); 
for (colHead = 0; colHead < xmlEl[0].childNodes.l: 

if (xmlEl[0].childNodes[colHead].nodeType 
g QUe; 


} 

var tab Head | document.createElement ("tl 
var col ocument.createTextNode( 
xmlEl[0].childNode 
tableHead.appendChild(colName); 
row.appendChild(tableHead); 


} 
tbody.appendChild(row); 
// Tao dóng trong báng 
for (i = 0; 1 < xmlEl.length; i++) { 
var row = document.createElement("tr"); 
// Tao các cót trong báng/td 
for (j = 0; j < xmIEl[i].childNodes.lengtl 
// Bỏ qua nếu kiểu không phải là : 
if (xmlEl[i].childNodes[j].nodeTyj 
continue; 
} 


// Chèn văn bản/dữ liệu thuc từ ti 
var td = document.createElement( "1 
if (199 2) { 

td.style.background - "£a: 
} 


var xmlData = document.createText! 
xmlEl[i].: 
td.appendch11d(xm1Data) ; 
row.appendChild(td); 
} 
tbody.appendChild(row); 
} 
document.getElementById("xmldata").appendChild(tal 


} 
function getXML() 


if (typeof document.implementation.createDocument 


docObj = document.implementation.createDo: 
docObj.onload = displayData; 


else if (window.ActiveXObject) 
{ 
docObj = new ActiveXObject("Microsoft.XMLI 
docObj.o statechange - function () { 
bj.readyState == 4) displ: 


}; 
} 
docObj.load("book n) 
} 
</script> 
</body> 
</html> 


Chuong 18 


Không có bài tâp trong Chuong 18. 


Chuong 19 


1. Không có phương thức HTTP nào dé cập trong chương này cung cấp khá 


năng bảo mật tốt hơn. Chỉ có việc bổ sung SSL mới cung cấp một tầng bảo 


mật lên trên các phuong thức HTTP. Cần lưu ý rằng việc sử dung phương 
thức POST không thực sự làm ẩn dữ liệu đầu vào và SSL chỉ nên dùng với 
phương thức POST vì phương thức GET đặt các tham số trực tiếp vào URL và 
luôn hiện bất kể SSL có được dùng hay không. 


. Các phản hồi sử dung HTML chuẩn có thể được truy xuất thông qua phuong 
thức responseText và có thể chứa bất bất ky nội dung nào được truyền qua 
HTTP. Các phản hồi XML được truy xuất thông qua phương thức 
responseXML và phải được server xử lý dưới dang XML. Các phản hồi 
JSON là các phản hồi dạng JavaScript; vì thế, chúng có những ưu thế nhất 
định về hiệu suất so với các phương thức khác. 


. Đáp án cho bài tập đã được trình bày trong nội dung chương, nhung trong lời 
giải dưới đây, chúng ta sẽ sử dụng lời gọi hàm không đồng bộ (thay thế giá 
tri YOUR SERVER tương ứng với môi trường của ban): 


«IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd”> 
«html» 

«head» 

«title» Khóng đồng bộ</title> 
</head> 

<body> 

«div id="xmldata"></div> 
«script type-"text/Javascript" ^ 
function readyAJA X() 1 

try 1 

return new XMLHttpRequest(); 

} catch(e) 1 

try { 

return new ActiveXObject(Msxml2.X MLHTTP); 

} catch(e) 1 

try 1 

return new ActiveXObject('Microsoft. XMLHTTP”; 
} catch(e) 1 

return "Ban cán düng mót trinh duyét mói hon."; 

j 

j 

j 


File sum.php là mót chuong trinh 
báo mát: 


«?php 


j 

var requestObj = readyAJA X(); 

var url ="http:/VOUR SERVER/sum.php?num1-2&num2-2"; 
requestObj.open(" GET" url,true); 
requestObj.send(); 
requestObj.onreadystatechange = function() { 
if (requestObj.readyState == 4) { 

if (requestObj.status == 200) 1 
alert(requestObj.responseText); 

yelse { 

alert(requestObj status Text); 

j 

j 

j 

</script> 

</body> 

</html> 


viết bằng PHP, rất nhỏ và không có 


print $ GET['num1'] + $ GET['num2']; 


Chuong 20 


1. Cách giải này sử dung Ví du 20-1 và bổ sung thêm button Submit vào form. 


Form sé gióng nhu sau: 


«form name="nameform" id-"nameform" actionz"" method-'GET' 
Nhập tên Bang: «input id-"textname" type="text" name="texi 
**<input type="submit" name="submit” id-"statesubmit"»** 
</form> 


Ngoài việc liên kết đến file ehandler.js, chúng ta cần khai báo một hàm xử lý 
sự kiện và hàm mới. Dưới đây là đoạn mã thêm vào đoạn JavaScript đã tồn 
tại trên trang. 


var formSubmit - document.getElementById("nameform"); 

EHandler.add("formSubmit","submit",function() { showstate| 

function showstate() ( 
alert(document.forms[0].textname.value); 

J 


2. Cách giải cho bài tập này gần giống cách giải của bài tập trước và các bài tập 
của Chương 19. Chương trình phía server cần trả về danh sách nhân viên 
trong công ty phân tách bằng dấu phẩy, tương tự như việc trả về danh sách 
các bang trong bài tập trên. 


Chương 21 


1. Cả jQuery và MooTools đều dễ dùng đối với người mới bắt đầu sử dung, 
PrototypeJS cũng tương đối dễ học. Dojo không hướng tới lập trình 
JavaScript cơ bản và có nhiều lập trình viên từng gặp rắc rối với YUI, dù các 
công cụ này có tài liệu đặc tả rất dày đủ. Tuy nhiên, mọi người đều có những 
phương pháp học tập khác nha khuyên bạn thử dùng từng thư 
viện thay vì nghe theo ý kiên ri 


2. Bài tập này cung cấp ví dụ về việc ti*tao thư viện và tham chiếu đến nó 


trong trang web. 


Chương 22 


1. Một cách để thực hiện điều này là sử dung hàm . hover ( ) cùng với hàm 
. CSS( ) để thay đối màu nền. Chúng được đặt trong hàm showStates trong 
file ajax.html: 


function showStates(data,status) { 
$.each(data, function(item) { 
$("Zstates").append("«div»" + data[item] - 
$('Z4states').children().hover( 
function() { 
$(th1s).css( 'background-cc 


i, 


function() { 
$(this).css('background-c« 
J 


5 
3); 
} 


2. Đây là đoạn mã phía server được viết bằng PHP. Đoạn mã này trả về chữ 
"Wisconsin" khi đối số nhận vào là từ viết tắt "WI": 


«?php 
$stateAbbrev = trim($ POST['state']); 
if ($stateAbbrev == "WI") { 
print json encode("Wisconsin"); 
J 
2> 


Sau đây là đoạn mã HTML, JavaScript và jQuery tạo ra kết quả dựa trên lời gọi 
AJAX: 


3C//DTD HTML 4.01//EN" 
/strict.dtd"» 


<!DOCTYPE HTML PU 
"http://www.w3.org 
«html» 

«head» 

<title>Kiểm tra Dữ liệu AJAX«/title» 

«script type="”"text/Javascript” data-srcz'jquery-1.4. 
</head> 

<body> 

<div id="state"> 

</div> 

<script type="text/javascript"> 
$(document).ready(function() { 


$.ajax({ 
type: "POST", 
url: "statefull.php", 
dataType: "json", 
success: showStateFull, 
data: "state=WT" 

}); 


function showStateFull(data,status) { 
$("Zstate").text(data); 
J 


3); 


</script> 
</body> 
</html> 


Chuong 23 


1. Ban có thể thêm tính năng để hiên thị tất cả các lựa chọn theo nhiều cách. Ví 
dụ này thêm một phần tử <a> với ID là showA11. ID đó sẽ được gắn với một 
hàm trong đoạn mã jQuery/JavaScript. Hàm này duyệt qua từng lựa chọn, và 
nếu thuộc tính display của lựa chon dang là none, đoạn mã thực thi hàm 
.show( ) cho lựa chọn đó. Một phuong án khác — có thể tốt hơn — là thêm 
một lớp hidden vào phần tử «1i» khi hàm . hide() được thực thi. Việc tìm 
phần tử bị ấn sau đó sé dé dàng hơn nhiều vì bạn chỉ cần tìm bất cứ phần tử 
<li> nào bị ẩn bên trong thé <ul>. Có một cách khác là dùng bộ chọn 
:hidden của jQuery; tuy nhiên, tôi đã gặp một vài vấn đề khi sử dung bộ 
chon : hidden trên các trình duyệtkhác nhau, đó là lý do tôi áp dụng cách 
làm khác trong bài tập này. Do dang nhu sau: 


TD HTML 4.01//EN" 
ict.dtd'» 


<!DOCTYPE HTML PUBLIC " 
"http: //www.w3.org/TR/ht 
«html» 
«head» 
<title>Ẩn phần tử</title> 
«script type-"text/javascript" data-srcz"jquery-1.4.2.min. 
«style type="text/css"> 
.removeBtn { 

color: #0000CC; 


} 

</style> 

</head> 

<body> 

<ul> 

<li 1d="option1">Lựa chon 1 «span class="removeBtn" 
«li id-"option2"»Lua chon 2 «span class-'"removeBtn" 
«li id-'"option3"»Lua chon 3 «span class-"removeBtn" 
«li id-"option4"»Lua chon 4 «span class-"removeBtn" 
«/ul» 

«a hrefz"" 1d="”"showAll">Show All«/a» 

«script type-"text/javascript'» 


$(document).ready(function() { 
$('.removeBtn').each(function(elm) { 
$(this).click(function() { 
$(this).parent().hide(); 
3); 


3): 
$('ZzshowAll').click(function() { 
$('.removeBtn').each(function(elm) { 
if ($(this).parent().attr("displa 
$(this).parent().show(); 


3): 
3): 
3): 
</script> 
</body> 
</html> 


. Chia khóa của bài tập này là sử dung tùy chọn async trong hàm .ajax() 
của jQuery. Không có tùy chon a nàm . accordion( ) sé thực thi trước 
khi các tùy chọn của accordion à xử ly bởi AJAX. Đoạn mã mẫu 
sử dụng lời gọi JSON để lấy về các bang đã dùng trong Chương 
22. Sau đó, danh sách này sẽ đ 0 accordion. Đoạn mã thiết lập 
async là false trong lời gọi tới hàm. ajax( ) và sau đó thêm một đoạn xử 
lý vào hàm showStates có trong Chương 22. Đây chỉ là biến thể của ví dụ 
accordion có trong Chương 23. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"» 

«html» 

«head» 

<title>Ví dụ về hiệu ứng Accordionc/title» 

«script type="text/Javascript"”" data-srcz"jquery-1.4.2.min. 
«script type-z"text/javascript" data-srcz"js/jquery-ui-1.8. 
«style type="text/css"> 


#container { 
width: 350px; 
height: 700px; 
border: solid 2px black; 
padding: 3px; 


.OoptionHead ( 
border: 


solid 1px black; 


background-color: #abacab; 


j 


.optionDiv ( 


border-bottom: dotted 1px black; 


J 
</style> 
</head> 
<body> 


<div id="container"> 


</div> 


«script type="text/javascript"> 
$(document).ready(function() { 


$.ajax({ 


}); 


function showSt 


3); 
3); 
</script> 
</body> 
</html> 


type: "GET", 

url: "json.php", 
dataType: "json", 
Success: tates, 
async: 


,Status) { 

(data, function(item) {; 
$("#container").append( 

"«h3 class=\"opti¢ 


}); 


$('#container').accordion({ 
collapsible: true, 
active: false 


» Giới thiệu tác giả 
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Òt tc í nghệ nói tié 
Học kiến thức lập trình JavaScript cơ sở thông D E NO doen: 


qua các hướng dán thực hành từng bước 


Cuốn sách hướng dẫn bạn từng bước để lập trình JavaScript. Lý tưởng 
cho người học làm quen với những kỹ năng lập trình cơ bản, cuốn sách 
này cung cáp các chi dẫn rõ ràng, những ví dụ thực hành thực té, cần 
thiết dé tạo hoặc tùy chỉnh các ứng dụng Web giảu tinh tương tác bằng 
cách sử dung kỹ thuật và các tính năng chính của JavaScript 


Bạn sẽ có khả năng: 
Viết và triển khai mã JavaScript sử dụng Microsoft® Visual Studio® 
2010, Eclipse IDE, hoặc các trình soạn thảo văn bản 
* Làm việc với cú pháp và các kiểu dữ liệu trong JavaScript 
Sử dung DOM dé truy xuất, tạo và thay đổi các phần tử HTML 
Tạo hiệu ứng rollover cho ảnh và hiệu ứng trình chiều ảnh 


* Kiểm tra tính hợp lệ và cung cắp phản hồi cho dữ liệu người dùng Hướng dẫn từng bước dành cho ————>, 
nhập vào Web form "ác viên " " 
: i — * Bài hưới thực hành ch 

Thao tác với các style CSS và đáp ứng lại các sự kiện trình duyệt xơ kỹ thuật = tính năng is ` 
Sử dụng AJAX dé phát triển các ứng dung Web giàu tính tương tác Mee tập thực hành 

` : à ` *⁄ Chuẩn bị và cung cắp thông tin 
Tiết kiệm công sức lập trình bằng cách sử dụng các framework Và các chủ al môi dành cho Eác 
JavaScript như jQuery lập trình viên 


| Sách tham khảo dành cho lập 
trình viên 

. Các chủ dà chuyên sâu 

E SEN MN. bao quát, 


. Thành thao hệ của 
công ng 


Tủ sách bản quyền FPT Polytechnic không ngừng Các chủ aii rong tica 

phát hành thêm những đâu sách mới về Công nghệ + _ Tìm hiểu sâu về khả năng và — 
thông tin và Quản trị kinh doanh có bán quyên, được —— . đc Ta ipo re « 
tuyén dich cán trong. Dé có thm thông tin, mòi các bao quát 
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